ESLint是js代码的质量检查工具，同时也具备一定的代码风格的格式化能力。 Prettier是一个代码风格的约束工具，Prettier能约束JS、JSX、TypeScript、Vue、CSS、Less、SCSS、HTML、JSON、Markdown等代码风格。 由于ESLint定义了一些js的代码格式化的约束，导致其与Prettier存在一些冲突。 如： ESLint默认语句结尾不加分号，Prettier默认语句结尾加分号； ESLint默认强制使用单引号，Prettier默认使用双引号； ESLint默认句末减少不必要的逗号，Prettier默认尽可能多使用逗号等等

本文使用Vue cli创建项目，并做简单配置，由于项目成员大多数使用webstorm和vs code开发工具，另外提供两个工具的配置方式。

新建项目

用Vue cli新建项目，创建时选择手动配置项目，linter / formatter 配置选择ESLint + Prettier，选择在保存时候进?代码规则检 测，不要选commit时检测，选择将 Babel、ESLint等配置文件保存到各自的配置文件中。 项目创建完成后可以看到package.json文件中，存在下列开发依赖

eslint js代码的质量检查工具prettier 代码风格的约束@babel/eslint-parser // ESLint的Babel解析器代替babel-eslint@vue/cli-plugin-eslint vue 专门的 ESLint 规则插件eslint-config-prettier 用 prettier 的规则，覆盖掉 eslint:recommended 的部分规则eslint-plugin-prettier 将prettier 的能力集成到 eslint 中。eslint-plugin-vue 用ESLint检查.vue文件的<template>和<script>

项目根目录下存在文件ESLint的配置文件.eslintrc.js

module.exports = { root: true, env: { node: true, }, extends: [ "plugin:vue/essential", "eslint:recommended", "plugin:prettier/recommended", ], parserOptions: { parser: "@babel/eslint-parser", // 解析器 }, rules: { "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off", }, };

由于ESLint也具备一定的代码风格的格式化能力，vue cli 用下面的两个插件，解决ESLint和Prettier冲突问题。

eslint-config-prettier：禁用掉了一些不必要的以及和 Prettier 相冲突的 ESLint 规则；eslint-plugin-prettier：将 prettier 作为 ESLint 的规则来使用，相当于代码不符合 Prettier 的标准时，会报一个 ESLint 错误，同时也可以通过 eslint --fix 来进行格式化；这样就相当于将 Prettier 整合进了 ESLint 中； root 根目录标识

ESLint 检测配置文件步骤： 在要检测的文件同一目录里寻找 .eslintrc.* 和 package.json； 紧接着在父级目录里寻找，一直到文件系统的根目录； 如果在前两步发现有 root：true 的配置，停止在父级目录中寻找 .eslintrc； 如果以上步骤都没有找到，则回退到用户主目录 ~/.eslintrc 中自定义的默认配置

env 运行环境

一个环境定义了一组预定义的全局变量 获得了特定环境的全局定义，就不会认为是开发定义的，跳过对其的定义检测。否则会被认为改变量未定义 前端开发常用的运行环境： browser - 浏览器环境中的全局变量。 node - Node.js 全局变量和作用域。 es6：es6 中除了模块之外的其他特性，同时将自动设置 parserOptions.ecmaVersion 参数为 6；以此类推 ES2017 是 7，而 ES2021 是 12； es2017：parserOptions.ecmaVersion 为 8； jquery - jQuery 全局变量。

globals 开发者自定义的全局变量 plugins 插件

插件用来扩展解析器的功能，插件是eslint-plugin-前缀的包，配置时无需加前缀

extends 规则继承

规则的类型： 1、eslint 开头的：是 ESLint 官方的扩展 如eslint:recommended 2、plugin 开头的：是eslint插件类型扩展，如 plugin:vue/essential,其插件前缀是eslint-plugin，省略了eslint- 3、eslint-config 开头的：来自 npm 包，配置时可以省略前缀 eslint-config-，比如上面的可以直接写成 standard 4、@开头的：扩展和 eslint-config 一样，只是在 npm 包上面加了一层作用域 scope； 5、一个执行配置文件的相对路径或绝对路径； 优先级： 如果 extends 配置的是一个数组，最终会将所有规则项进行合并，出现冲突的时候，后面的会覆盖前面的 通过 rules 单独配置的规则优先级比 extends 高

rules 自定义规则

规则的值 ‘off’ 或 0：关闭对该规则的校验； ‘warn’ 或 1：启用规则，不满足时抛出警告，不会退出编译进程； ‘error’ 或 2：启用规则，不满足时抛出错误，会退出编译进程； 如果某项规则，有额外的选项，可以通过数组进行传递，数组的第一位必须是错误级别。 如 ‘semi’: [‘error’, ‘never’], never就是额外的配置项

这时候如果我在文件中加入代码

console.log("HelloWorld")

编译时将会抛出错误，退出编译进程 如果希望抛出警告或关闭prettier，可在rules自定义下面规则

"prettier/prettier": "warn" 配置自己的规则

ESLint就采用推荐的规则，大多数情况下我们希望按照自己的习惯自定义一些Prettier规则。 自定义格式化文件 ,文件名可以是.prettierrc（JSON格式） .prettierrc.js/prettier.config.js（js格式，需要module.exports一个对象） 为了加入注释让其他成员快速了解规则，这里使用 .prettierrc.js文件进行配置

module.exports = { printWidth: 120, // 一行最多 120 字符(默认80) tabWidth: 2, // 每个tab相当于多少个空格（默认2） useTabs: false, // 是否使用tab进行缩进（默认false） semi: false, // 行尾需要有分号(默认true) singleQuote: true, // 使用单引号（默认false） quoteProps: 'as-needed', // 对象的 key 仅在必要时用引号 jsxSingleQuote: false, // jsx 不使用单引号，而使用双引号 trailingComma: 'none', // 多行使用拖尾逗号（默认none） bracketSpacing: true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"（默认true） jsxBracketSameLine: false, // 多行JSX中的>放置在最后一行的结尾，而不是另起一行（默认false） htmlWhitespaceSensitivity: 'css', // 根据显示样式决定 html 要不要折行 arrowParens: 'avoid', // 只有一个参数的箭头函数的参数是否带圆括号（默认avoid:添加括号） endOfLine: 'auto' // 行尾换行符 } 让代码编辑器识别规则

配置规则后，我们需要编辑器能够给出错误提示，按我们的规则格式化代码等提高工作效率，而不是手动调整代码，在命令行中查看错误信息，下面再编辑器中进行配置。 Webstorm和vs code 都能够安装ESLint和Prettier插件

Webstorm配置

有的版本Webstorm已经自带了Eslint、Prettier插件

Eslint

添加 prettier的文件监听配置 查看格式化快捷键： 如果开启保存时自动格式化，需将webstorm/vs code的自动保存功能关闭

vs code

安装插件Vetur（vue语法增强） ESLint、Prettier,Vetur 也有?套 Format 规则,VSCode 中ESlint 集成了 prettier 的校验规则,不需要再单独安装 Prettier 插件

配置 Prettier 为默认代码格式化工具

同时按下 command/ctrl + shift + p 键盘输入 format document with选择 Configure Default Formatter…选择 Prettier 为默认的工具

配置文件保存时自动格式化

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。