Eslint和Prettier的区别：
Eslint：
1. Eslint可以对js语法检测、限制和修复
2. Eslint可以对代码风格进行格式化，但是不能对css、less等格式化
Prettier：
1. Prettier不可以对任何语法检测、限制和修复
2. Prettier可以对多种代码风格，包括js、jsx、ts、json、css、less、scss、html、vue等等进行格式化
从上面两点比较可以看出，Eslint对代码语法检测限制和修复更专业，而Prettier对代码风格更专业，所以项目中Eslint可以检测语法中潜在的问题，比如定义某个变量却没有使用，这时候Eslin会发出警告，Prettier专门做格式化，统一团队中所有人的代码风格。
所以项目中，Eslint做语法检测，Prettier做格式化，但是Eslint中也有对代码的格式化功能，会不会和Prettier的格式化冲突？会，但是可以解决，很简单，用eslint-plugin-prettier关掉所有和prettier冲突的eslint配置，也就是以prettier为主，相当于prettier接管了eslint中代码格式的问题，而语法校验依然用的是eslint，这样两者就完美结合了
下面是针对vue2（vue3不同，但是大同小异）的Eslint和Prettier需要的插件：
插件装完以后就需要配置Eslint和Prettier规则了，在项目根目录下新建.eslintrc.js文件 和.prettierrc.js文件，如下图：
.eslintrc.js文件 内容如下：
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint'
},
env: {
browser: true,
node: true,
es6: true
},
extends: [
'eslint:recommended',
'plugin:vue/strongly-recommended',
'@vue/standard'
],
// 添加规则
/**
* eslint https://eslint.bootcss.com/docs/rules/
* vue扩展 https://github.com/vuejs/eslint-plugin-vue/tree/v6.2.2/docs/rules
* https://eslint.vuejs.org/rules/
* 0 or 'off'
* 1 or 'warn'
* 2 or 'error'
*/
rules: {
semi: 0,
'space-before-function-paren': 0,
// 最大属性每行
'vue/max-attributes-per-line': [
2,
{
singleline: 5, // 一行是最大属性数
multiline: {
max: 1, // 多行是最大属性数
allowFirstLine: false // 是否允许属性和标签在同一行
}
}
],
// 自定义属性断字 my-prop (always,never,ignore)
'vue/attribute-hyphenation': [0, 'always'],
// html标签自关闭
'vue/html-self-closing': [
1,
{
html: {
void: 'always',
normal: 'always',
component: 'always'
},
svg: 'always',
math: 'always'
}
],
// 组件名称模板 PascalCase,kebab-case,registeredComponentsOnly,ignores
// 'vue/component-name-in-template-casing': [1, 'kebab-case'],
'vue/component-name-in-template-casing': 0,
// 结束括号间距 关闭>标签括号之前强制执行一致的间距样式
'vue/html-closing-bracket-spacing': 0,
// 单行元素的内容前后换行
'vue/singleline-html-element-content-newline': 0,
// 禁止注册模板中未使用的组件
'vue/no-unused-components': 1,
// 多行元素的内容前后换行
'vue/multiline-html-element-content-newline': 0,
// 禁止在与 v-for 相同的元素上使用 v-if
'vue/no-use-v-if-with-v-for': 1,
// 要求或禁止在标签的右括号前换行
'vue/html-closing-bracket-newline': 0,
// template模板js解析错误
'vue/no-parsing-error': 1,
// vue组件的name必须使用大驼峰式命名
'vue/name-property-casing': [1, 'PascalCase'],
// 强制组建中方法顺序
'vue/order-in-components': 2,
// 强制执行有效的 `v-show` 指令
'vue/valid-v-show': 1,
// 要求使用 `===` 和 `!==`
'vue/eqeqeq': 2,
// 禁用 console
'no-console': 0,
// 禁用 tab
'no-tabs': 0,
// 禁用 var
'no-var': 1,
// 强制使用一致的反勾号、双引号或单引号
quotes: [
2,
'single', // 要求尽可能地使用单引号
{
avoidEscape: true, // 允许字符串使用单引号或双引号
allowTemplateLiterals: true // 允许字符串使用反勾号
}
],
// 禁止删除变量
'no-delete-var': 2,
// 要求使用 const 声明那些声明后不再被修改的变量
'prefer-const': [
2,
{
ignoreReadBeforeAssign: false
}
],
// 强制 generator 函数中 * 号周围有空格 es6 Generators函数
'generator-star-spacing': 'off',
// 禁止混合使用不同的操作符 运算符
'no-mixed-operators': 0,
// 强制箭头函数的箭头前后使用一致的空格（--fix)
'arrow-spacing': 1,
// 禁止或强制在代码块中开括号前和闭括号后有空格（--fix)
'block-spacing': 1,
// 不允许在 case 子句中使用词法声明
'no-case-declarations': 1,
// 要求使用骆驼拼写法
camelcase: 0,
indent: 'off',
'vue/html-indent': 'off',
'standard/computed-property-even-spacing': 0,
'no-mixed-spaces-and-tabs': 0,
'no-useless-escape': 0,
'vue/no-multi-spaces': 0,
'no-unexpected-multiline': 0
}
};
.prettierrc.js文件内容如下：
module.exports = {
endOfLine: 'auto',
// 书写宽度
printWidth: 80,
// 语句末尾打印分号
semi: true,
// 使用单引号
singleQuote: true,
// 尾随逗号
trailingComma: 'none',
// 在方法的花括号前面加空格
spaceBeforeFunctionParen: true,
// 用键位tab缩进
useTabs: true,
// 标签换行不完整问题
htmlWhitespaceSensitivity: 'ignore',
// 在唯一的箭头函数参数周围包含括号
arrowParens: 'always'
};
到这里关于Eslint和Prettier的配置就结束了，但是还有一些需要注意的点，比如代码编辑器需要安装Eslint插件和Prettier插件，如下图：
到这里就结束了？没有，还需要配置编辑器的默认格式化插件，这个在vscode的settings.json文件中配置即可，比如html、css、less、JavaScript、vue、json、typescript等等语言的默认格式化插件，这里都配置为Prettier，(settings.json)如下所示：
{
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[markdown]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false,
// 重新设定tabsize
"editor.tabSize": 2,
// #每次保存的时候自动格式化
"editor.formatOnSave": true,
// 当编辑器失去焦点时，自动保存更改了的编辑器
"files.autoSave": "onFocusChange",
// 配置文件关联 :任何 vue 后缀的文件会被认为是vue文件
"files.associations": {
"*.vue": "vue"
},
// 编辑器字体大小
"editor.fontSize": 18,
// 若设置为 true，则自动从当前 Git 仓库的默认远程仓库提取提交
"git.autofetch": true,
// 在没有暂存的更改时提交所有更改
"git.enableSmartCommit": true,
// 每次保存的时候将代码按eslint格式进行修复
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
// 启用在vscode中重命名或者移动文件夹时自动更新导入路径的功能--js
"javascript.updateImportsOnFileMove.enabled": "always",
// 启用在vscode中重命名或者移动文件夹时自动更新导入路径的功能--ts
"typescript.updateImportsOnFileMove.enabled": "always",
// 每次保存的时候以下文件类型将代码按eslint格式进行修复
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue"
],
// 路径映射
"alias-skip.mappings": {
"@": "/src",
"~@/": "/src",
"views": "/src/views"
},
// 在文件路径中指定要替换的前缀
"vue-helper.componentPrefix": {
"alias": "@",
"path": "src"
},
}到这里就真的结束了。
彩蛋：如果上面关于vscode的settings.json配置需要团队中所有人都统一，这样带来的好处是，比如团队中有四五个人甚至更多人，你就不需要挨个挨个教他们配置，甚至还要看他们配置的对不对，而且你还可以告诉团队中的人Eslint+Prettier需要安装的vscode插件，做法非常简单，可以看下面的文章：
7633
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
