vue-cli4 ESLint + prettier 修改插件规则实例

prettier规则配置项 Options

一般不太会去修改、或默认格式就挺好的部分属性就不列了，有需要可以去官网查阅API

tabWidth：<int> - 默认值 2，缩进级别的空格数
useTabs：<bool> - 默认值 false，true 表示用tab代替space来作为缩进的单位
semi：<bool> - 默认值 true，表示在每个语句的末尾添加分号
singleQuote：<bool> - 默认值 false，true则表示使用单引号而不是双引号
jsxSingleQuote：<bool> - 默认值 false，true则表示在JSX中使用单引号而不是双引号
jsxBracketSameLine：<bool> - 默认值 false，true则表示在多行JSX元素中将>放在最后一行的末尾，而不是单独放在下一行，像这样：

// "jsxBracketSameLine"：true

<button
  className="prettier-class"
  id="prettier-id"
  onClick={this.handleClick}>
  Click Here
</button>

trailingComma：<es5|none|all> - 默认值 es5，即在es5中给数组/对象的末尾元素加上逗号，如果个人习惯不加逗号的话就改成 "none"
arrowParens：<always|avoid> - 默认 always，当箭头函数只有一个参数是不省略 ()，建议是保留，但个人习惯是改成 avoid(即省略括号)
proseWrap：<always|never|preserve> 默认值 preserve，即按原样包装markdown文本(保持原本的折行)，never 是软折行(当屏幕放不下时才折行), always 是超过 printWidth 就折行

prettier支持的几种配置方式(按优先级)：Configuration

package.json中的"prettier"属性。
项目根目录下.prettierrc(JSON 或 YAML格式)
项目根目录下.prettierrc.js、prettier.config.js，用module.exports导出一个对象

我喜欢用 .prettierrc(JSON格式) ，简洁直观，作为独立文件又方便维护；但prettier.config.js又方便注释，看个人需求

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
  "printWidth": 120,
  "arrowParens": "avoid",
  "bracketSpacing": true,
  "jsxSingleQuote": true,
  "jsxBracketSameLine": true
}

保存文件的时候用 prettier 规则自动格式化

我的编辑器是VSCode，对应的 prettier 插件地址：Prettier - Code formatter
另外，可以去这个 vscode扩展市场查看插件怎么在vscode配置，里面一般有API文档或地址。

我们先在扩展商店安装这个插件：

再给用户或工作区的 settings.json 根据需求做如下配置：

// settings.json
{
  "editor.formatOnSave": true, // 保存文件时自动格式化
  "editor.insertSpaces": true,
  "editor.tabSize": 2,
  "editor.formatOnSave": true, // 保存文件时自动格式化
  "eslint.run": "onSave",
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 设置 prettier 为 默认格式化程序
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode" // 为特定语言设置格式化程序
  }
}

想给不同语言配置不同的自动化格式，都可以像上面那样单独写，比如 jsonc、 [javascriptreact](JavaScript React)等，不清楚的化，可以查找下对应的语言标识符。
对了，我们当然可以直接在VSCode的【设置】功能配置插件(如Prettier)的各项options，然后这些设置会被自动添加到相应的settings.json(用户或工作区/即当前项目)里，和我们手动编辑settings.json是一样的。虽然这样貌似更容易和直观，但优先级肯定还是.prettierrc高，而且它作为一个独立文件更方便维护。

为什么需要在类似`.prettierrc`的配置文件修改规则，而不是在直接在`eslintrc.js`做prettier的配置呢？

eslint-plugin-prettier 插件的文档上明确告诉我们了：
虽然可以通过ESLint配置文件eslintrc.js将选项传递给Prettier，但不建议这样做，因为像Prettier - Code formatter这样的编辑器扩展插件会读取. pretierrc，却不会从ESLint读取设置，这会导致矛盾的体验。

在 eslintrc.js 可做的 prettier 的配置项有：

一：传递需要修改的配置参数

rules: {
  "prettier/prettier": ["error", {"singleQuote": true, "semi": false, "parser": "flow"}]
}

二：不启用.pretierrc文件的配置，如果正在使用的多个工具相互冲突，或者不希望将ESLint设置与Prettier配置混合使用，可能会很有用。不然实在没必要这样做。

rules: {
  'prettier/prettier': ['error', {}, { usePrettierrc: false }]
}

延伸：怎么知道脚手架项目具体用了哪些ESLint配置和插件？

当我们的eslintrc.js配置里有 extends 扩展包的时候，这些扩展都是大大们精细封装好的，可能集成了多个插件并加上自身的规则，就像"plugin:vue/essential"、"@vue/prettier"，未必能直观看出用了什么eslint插件。
比如当eslint报错的时候，我们看到warning来自prettier，肯定要找和prettier相关的插件。
在这篇：➡️ ESLint配置规则详解和常用配置，我们详细捋清了vue-cli4 ESLint + prettier 最终的 ESLint 默认配置，除了一些自定义的规则，还依赖于 eslint-plugin-vue、eslint-plugin-prettier、eslint 本身。寻找思路示例截图：

清楚用了什么插件有什么意义呢？那就是当我们不知道怎么修改/覆盖规则的时候，多个地方找答案咯。甚至取巧地在插件导出的模块对象里直接修改配置(不建议，因为更新包可能会被覆盖掉)。查官方文档总是比哐哐百度有用得多，因为官方的信息至少是实时更新的。

我的`eslintrc.js`配置：

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    semi: ['warn', 'never'], // 语句末尾不加分号
    quotes: ['warn', 'single'], // 默认使用单引号
    'jsx-quotes': ['warn', 'prefer-single'], // JSX属性中使用一致的单引号
    'space-before-function-paren': ['warn', { anonymous: 'never', named: 'never', asyncArrow: 'always' }], // 在具名函数/和匿名函数名(function)后面不要留空格
    'array-bracket-newline': ['error', 'consistent'], // 数组两个[ ]之间需要一致的换行符
    'array-element-newline': ['error', 'consistent'], // 数组元素之间保持一致的换行符
    'comma-dangle': ['error', 'never'] // 数组/对象末位元素不加逗号
    'multiline-ternary': ['error', 'always-multiline'], // 如果三元表达式自身跨越多个行，则在三元表达式的操作数(: / ? / && )之间强制换行。
    'object-property-newline': ['error', { allowAllPropertiesOnSameLine: true }], // 允许对象属性不换行，默认是强制换行
    'no-else-return': 'error', // if 内有 return 不允许结束后再跟 else
    'no-unused-vars': 'off', // 禁止有声明了却未使用的变量。暂时注释掉也会报错，所以注掉
    'no-unused-components': 'off' // 禁止有注册了却未使用的组件，原因同上
  }
}

修改配置之前，这只是冰山一角

修改配置之后，清清爽爽连 warning 都是 0，怎么说呢，这个feel倍儿爽～