在项目中使用eslint&perttier小结在最近工作中需要统一代码规范，这项任务交到了我的手上。并且确认了使用esl

前言

在最近工作中需要统一代码规范，这项任务交到了我的手上。并且确认了使用eslnt&perttier的代码管理规范。接下来记录一下我的使用经历。

关于eslint与perttier的安装这里不再过多的去展开。在eslint配置中主要配置的就是env，extend，plugin，parserOptions，rules。他们的含义这里也不展开说明。主要记录一下踩坑：

1. eslint结合perttier时导致的冲突

这个问题在网上有很多的解决方案，也都能很好的解决问题。这里简单记录一下。

- 需要安装以下相关eslint与perttier包

- - eslint-config-prettier
  - eslint-plugin-prettier

- 在.eslintrc.js中增加perttier的扩展，和增加prettier错误规则

  extends: [
    // ...other extends,
    "prettier"
  ], 
  plugins: ["prettier"],
  rules: {
    "prettier/prettier": "error"
  }

或者直接

  extends: [
    // ...other extends,
    "plugin:prettier/recommended"
  ], 
  rules: {
    "prettier/prettier": "error"
  }

我采用的就是下面这种方式。

这之后就需要去统一eslint与perttier的规则统一，一定，一定，一定不要出现两个相反的配置。比如eslint配置已分号结尾，perttier设置不已分号结尾。我认为最好的办法就是只用perttier默认选项，不单独配置.prettierrc.json等单独的配置文件。然后在eslint的rules中配置相关规则。

其实我对eslint&perttier结合使用的理解是perttier负责代码的格式化，eslint负责去指定格式化的规则与检查，这样结合使用是一个很好的方式。

2. vscode保存时自动格式化代码并eslint校验

这里我推荐在项目中创建.vscode文件夹，在文件夹中创建settings.json文件进行配置

"eslint.options": {
    "extensions": [".js", ".vue", ".ts", ".tsx"]
  },
  "editor.formatOnSave": false,
  "eslint.alwaysShowStatus": true,  // 总是在 VSCode 显示 ESLint 的状态
  "editor.codeActionsOnSave": {     // 保存时使用 ESLint 修复可修复错误
      "source.fixAll": true,
      "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "vue",
    "html",
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact"
  ],
  "vetur.format.defaultFormatter.html": "prettier"

结语

以上就是我在项目中使用eslint加perttier的一些总结。