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倍儿爽～
网友评论