Руководство по настройке Prettier

спецификация кода

theme: smartblue highlight: a11y-dark

Более красивое руководство для справки. Из-за ограниченных возможностей личного понимания, если есть какие-либо ошибки, пожалуйста, дайте мне знать.

1. Установка

установить команду

//npm
npm install --save-dev --save-exact prettier
//yarn
yarn add --dev --exact prettier

2. Подготовка документов

Создайте более красивые необходимые файлы

Создать в корневом каталоге.prettierrc.jsфайлы конфигурации и.prettierignoreигнорировать файлы

3. Создайте конфигурацию

1. Создайте справочные правила форматирования

существует.prettierrc.jsНапишите следующее в:

//此处的规则供参考，其中多半其实都是默认值，可以根据个人习惯改写
module.exports = {
  printWidth: 80, //单行长度
  tabWidth: 2, //缩进长度
  useTabs: false, //使用空格代替tab缩进
  semi: true, //句末使用分号
  singleQuote: true, //使用单引号
  quoteProps: 'as-needed', //仅在必需时为对象的key添加引号
  jsxSingleQuote: true, // jsx中使用单引号
  trailingComma: 'all', //多行时尽可能打印尾随逗号
  bracketSpacing: true, //在对象前后添加空格-eg: { foo: bar }
  jsxBracketSameLine: true, //多属性html标签的‘>’折行放置
  arrowParens: 'always', //单参数箭头函数参数周围使用圆括号-eg: (x) => x
  requirePragma: false, //无需顶部注释即可格式化
  insertPragma: false, //在已被preitter格式化的文件顶部加上标注
  proseWrap: 'preserve', //不知道怎么翻译
  htmlWhitespaceSensitivity: 'ignore', //对HTML全局空白不敏感
  vueIndentScriptAndStyle: false, //不对vue中的script及style标签缩进
  endOfLine: 'lf', //结束行形式
  embeddedLanguageFormatting: 'auto', //对引用代码进行格式化
};

Правила форматирования также могут быть записаны в следующие файлы (в порядке убывания приоритета):

1. Проектpackage.jsonв файле

2. .prettierrc.jsonили.prettierrc.ymlв файле

//格式示例
{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

3. .prettierrc.jsилиprettier.config.cjsв файле

//格式示例
module.exports = {
  trailingComma: 'es5',
  tabWidth: 4,
  semi: false,
  singleQuote: true,
};

Кроме того, он также может быть написан многими типами, подробности см. на официальном сайте preitter и здесь не описывается.

2. Настройте игнорирование файлов

существует.prettierignoreНапишите следующее в:

# Ignore artifacts:
build
coverage

# Ignore all HTML files:
*.html

В-четвертых, отформатируйте документ

1. Форматирование командной строки

(1) Форматировать все документы

npx prettier --write .
//或
yarn prettier --write .

(2) Отформатировать указанный документ

npx prettier --write src/components/Button.js
//或
yarn prettier --write src/components/Button.js

(3) Проверьте, отформатирован ли документ

npx prettier --check .
//或
yarn prettier --check .
//检查指定文件同上

2. Форматирование с помощью плагинов редактора

Найдите соответствующую установку Prettier в редакторе, и вы можете использовать сочетания клавиш редактора для форматирования.

общий редактор Соответствующее название плагина
VS Code Prettier - Code formatter
Emacs prettier-emacs
Vim vim-prettier
Sublime Text JsPrettier
Atom prettier-atom

Важно: правила красивого форматирования в редакторе также можно прописать в настройках, но локальные правила будут иметь приоритет при фактическом выполнении.

3. Интеграция в ESlint

ESlint и Prettier могут конфликтовать, поэтому необходимы следующие настройки:

//1. 安装 eslint-config-prettier 插件
npm i -D eslint-config-prettier
//2. 在eslint的配置文件中写入以下内容
 extends: ['plugin:prettier/recommended'], // 避免与 prettier 冲突

4. Интегрируйтесь в жизненный цикл git

В комплекте с ворсинками и хаски

-----Конец текста-----

----- Ниже приведен эффект украшения, соответствующий вышеуказанным правилам (три-1), для справки -----Настроить адрес отладки

До благоустройства:

function HelloWorld({greeting = "hello", greeted = '"World"', silent = false, onMouseOver,}) {
  
  
  let quotePropsDemo = {
    a:1,
    'b-2':2,
    'c':3
  }

  let arrowParensDemo =x=>x
  
  if(!greeting){return null};

     // TODO: Don't use random in render
  let num = Math.floor (Math.random() * 1E+7).toString().replace(/\.\d+/ig, "")

  return <div className='HelloWorld' title={`You are visitor number ${ num }`} onMouseOver={onMouseOver}>

    <strong>{ greeting.slice( 0, 1 ).toUpperCase() + greeting.slice(1).toLowerCase() }</strong>
    {greeting.endsWith(",") ? " " : <span style={{color: '\grey'}}>", "</span> }
    <em>
	{ greeted }
	</em>
    { (silent)
      ? "."
      : "!"}

    </div>;

}

После благоустройства:

function HelloWorld({
  greeting = 'hello',
  greeted = '"World"',
  silent = false,
  onMouseOver,
}) {
  let quotePropsDemo = {
    a: 1,
    'b-2': 2,
    c: 3,
  };

  let arrowParensDemo = (x) => x;

  if (!greeting) {
    return null;
  }

  // TODO: Don't use random in render
  let num = Math.floor(Math.random() * 1e7)
    .toString()
    .replace(/\.\d+/gi, '');

  return (
    <div
      className="HelloWorld"
      title={`You are visitor number ${num}`}
      onMouseOver={onMouseOver}
    >
      <strong>
        {greeting.slice(0, 1).toUpperCase() + greeting.slice(1).toLowerCase()}
      </strong>
      {greeting.endsWith(',') ? (
        ' '
      ) : (
        <span style={{ color: 'grey' }}>", "</span>
      )}
      <em>{greeted}</em>
      {silent ? '.' : '!'}
    </div>
  );
}
Категории