使用 Prettier+Eslint 检查代码

基于 vue-cli 项目

目前比较流行的代码检查工具，应该就属这两个了吧，用起来挺爽的，特别是配合其他小伙伴一起开发的时候，格式下代码瞬间变回熟悉的那个味，香！

虽然用起来挺爽的，但是在配置上还是捣鼓挺久的，因为Eslint 和 Prettier 都各有一套规则（部分有重合的，也就是我们需要去兼容的）。下面分享一下我配（can）置（kao）的流程吧。

1. 安装插件 Eslint 和 Prettier

（可能会有挺多类似的，挑下载量最大的下载应该不会错的）

2. 下载依赖

npm install --save-dev eslint prettier

下面的依赖用于保存时自动检查代码格式，可以提前下载

npm install --save-dev eslint-friendly-formatter eslint-loader eslint-plugin-html eslint-plugin-vue

3. 配置规则

.eslintrc.js 文件

module.exports = {
  root: true,
  env: {
    node: true
  },
  // extends，根据创建项目时选择的工具不同而不同，这里不需要修改
  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',
  // 函数括号前面不加空格，还没找到prettier设置项可以兼容空格，这里暂时设置忽略
    'space-before-function-paren': 'off'
  }
};

.prettier.config.js 文件，参考地址：ts.xcatliu.com/engineering…

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

4. vscode 配置保存时自动检查

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},
"eslint.enable": true,
"editor.formatOnSave": true,
"eslint.options": {
  "extensions": [".js", ".vue", "jsx", "ts", "tsx",".html"]
},
"eslint.validate": [
  "javascript",
  "javascriptreact",
  "vue",
  "html",
  "typescript"
],

按照流程下来应该是可以配置成功了。nice