手把手教你使用 ESLint + Prettier 规范项目代码

相信小伙伴们在小学时都经历过小平头时代，那时的教务处主任天天学校门口巡视，同学们更是一个个心惊胆战。那时的我们就好比一行行代码，如果发型不一，上来就是两…55555 不说了… 所以说统一样式更有助于我们更统一的管理，也会使我们少犯错误，这时 ESlint 站出来了，它就是教务处主任的化身，会将我们的形形色色的发型 (代码) 统一起来，虽然验证过得代码不一定完美，但是一定相对规范。

什么是 ESLint?

ESLint 是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具，使用它可以避免低级错误和统一代码的风格。如果每次在代码提交之前都进行一次 eslint 代码检查，就不会因为某个字段未定义为 undefined 或 null 这样的错误而导致服务崩溃，可以有效的控制项目代码的质量。

ESlint 的主要作用

1. 代码质量问题：使用 / 编写的方式有可能有问题 (problematic patterns)

2. 代码风格问题：风格不符合一定规则 (doesn’t adhere to certain style guidelines)

就好比有些同学喜欢使用 tab 缩进，有些喜欢空格，有些喜欢 2 个空格，有些喜欢 4 个。这就难办了，到底听谁的？

最后经过一番舌战，选定 2 个空格作为标准。于是乎我们在根目录创建了配置文件.eslintrc 并写入了我们的伦果

代码语言：javascript复制

// .eslintrc    
{        
  "indent": ["error", 2]    
}

• 为了大家的提高大家的开发体检及提交的一致性，你还‘威逼利诱’的让大家下载了 vscode 插件，没有通过 ESLint 校验的代码 VSCode 会给予下滑波浪线提示，提醒他好好检查。
• 为了保证提交代码的万无一失，你还添加一个 pre-commit 钩子 eslint --ext .js src，确保没有通过 lint 的代码不会被提交。
• 最后还要求了大家使用 eslint --fix 将之前的所有代码，一键修改成了新规范下的代码格式。

什么是 Prettier?

一个流行的代码格式化工具的名称，它能够解析代码，使用你自己设定的规则来重新打印出格式规范的代码。

Tony 老师认为发型很重要，Prettier 也这么认为。 Prettier 认为格式很重要，但是格式好麻烦，我来帮你们定好吧。简单来说，不需要我们再思考究竟是用 single quote，还是 double quote 这些乱起八糟的格式问题，Prettier 帮你处理。最后的结果，可能不是你完全满意，但是，绝对不会丑。

Prettier 接管了两个问题其中的代码格式的问题，而使用 Prettier ESLint 就完完全全解决了两个问题

当然，教务处主任和 Tony 老师对发型的理解‘不共戴天’，所以我们还需要对他们进行一番深入交流。下面就让我们一起开始吧！

正文

依赖安装

在你的项目中安装以下依赖，这些依赖只需安装在开发环境配置中

代码语言：javascript复制

npm install eslint prettier --save-dev

代码语言：javascript复制

npm install eslint-config-prettier eslint-plugin-prettier --save-dev

vscode 插件安装

安装 vscode 插件 ESLint 和 Prettier - Code formatter

如果希望在每次保存时自动格式化代码可以加上以下配置

• 项目下创建 .vscode/settings.json 配置 (也可以配置到全局)
• 配置每次报错自动 ESLint 检查规则并格式化

代码语言：javascript复制

{
 "editor.codeActionsOnSave": {
   "source.fixAll.eslint": true
 }
}

添加配置文件

添加配置文件 .eslintrc.js

代码语言：javascript复制

// .eslintrc
module.exports = {
  plugins: ['prettier'],  // prettier 一定要是最后一个，才能确保覆盖
  rules: {
    'prettier/prettier': 'error',
  },
  extends: ['plugin:prettier/recommended'],
};

上面配置在运行报错时可选以下配置

代码语言：javascript复制

// .eslintrc
module.exports = {
  plugins: ['prettier'],
  parser: "vue-eslint-parser",
  parserOptions: {
    sourceType: 'module',
    ecmaVersion: 2020,
    parser: 'babel-eslint',
  },
  rules: {
    'prettier/prettier': 'error',
    "parser": 0
  },
  extends: ['plugin:prettier/recommended'],
};

以下是我的个人配置，仅供参考

创建配置文件 .prettierrc.js

代码语言：javascript复制

//.prettierrc.js
module.exports = {
  // 一行最多 120 字符
  printWidth: 120,
  // 使用 2 个空格缩进
  tabWidth: 2,
  // 不使用 tab 缩进，而使用空格
  useTabs: false,
  // 行尾需要有分号
  semi: true,
  // 使用单引号代替双引号
  singleQuote: true,
  // 对象的 key 仅在必要时用引号
  quoteProps: 'as-needed',
  // jsx 不使用单引号，而使用双引号
  jsxSingleQuote: false,
  // 末尾使用逗号
  trailingComma: 'all',
  // 大括号内的首尾需要空格 { foo: bar }
  bracketSpacing: true,
  // 箭头函数，只有一个参数的时候，也需要括号
  arrowParens: 'always',
  // 每个文件格式化的范围是文件的全部内容
  rangeStart: 0,
  rangeEnd: Infinity,
  // 不需要写文件开头的 @prettier
  requirePragma: false,
  // 不需要自动在文件开头插入 @prettier
  insertPragma: false,
  // 使用默认的折行标准
  proseWrap: 'preserve',
  // 根据显示样式决定 html 要不要折行
  htmlWhitespaceSensitivity: 'css',
  // 换行符使用 lf
  endOfLine: 'lf',
};

添加命令

代码语言：javascript复制

  // package.json中scripts中加入
  "lint": "eslint --ext .js,.vue src",  // 检查项目是否符合eslint规则
  "prettier": "prettier --write .",     // 一键格式化所有文件

忽略文件

当然，在特殊情况下，比如某个学生是校长的儿子，女儿之类的，教务处长总会睁一只眼，闭一只眼。所以我们也需要进行一些选择性的忽视。

eslint 忽略文件

.eslintignore

prettier 忽略文件

.prettierignore

忽略规则与.gitignore 一致

报错及异常情况

• Tip1: 执行 npm run lint 报 'prettier/prettier': context.getPhysicalFilename is not a function

移除以下依赖，项目中不存在的就不用移除

代码语言：javascript复制

npm rm @vue/cli-plugin-babel @vue/cli-plugin-eslint @vue/eslint-config-prettier eslint eslint-plugin-prettier eslint-plugin-vue prettier

安装指定版本的依赖

代码语言：javascript复制

npm i -D @vue/cli-plugin-babel@4.4.6 @vue/cli-plugin-eslint@4.4.6 @vue/eslint-config-prettier@7.0.0 eslint@7.15.0 eslint-plugin-prettier@3.4.1 eslint-plugin-vue@7.2.0 prettier@2.5.1

• Tip2: 执行 npm run lint 报 # Vue error: Parsing error: Unexpected token <

在.eslintrc.js 中加入 parser: 'vue-eslint-parser'

• Tip3 执行 npm run dev 报 Cannot find module 'core-js/modules/es.array.concat.js'

在 babel.config.js 文件中的 presets 添加 userBuiltIns

代码语言：javascript复制

module.exports = {
  presets: [['@vue/app',{ useBuiltIns: "entry" }]],
};

源码附件已经打包好上传到百度云了，大家自行下载即可～

代码语言：javascript复制

链接: https://pan.baidu.com/s/14G-bpVthImHD4eosZUNSFA?pwd=yu27
提取码: yu27

百度云链接不稳定，随时可能会失效，大家抓紧保存哈。

如果百度云链接失效了的话，请留言告诉我，我看到后会及时更新～

开源地址

码云地址： http://github.crmeb.net/u/defu

Github 地址： http://github.crmeb.net/u/defu

javascript eslint npm ide

0 人点赞