ESLint + Prettier究竟咋回事儿

Hacker
551 阅读6分钟

有人可能不太清楚ESLint和Prettier之间的区别。前者主要是对代码质量的把控，比如当使用了未声明的变量会报错等，当然它也能对代码进行format，但是没有Prettier做得好，Prettier只对代码进行format，不管质量。

ESLint

基本使用

首先eslint是一个npm包，一般在项目中都会集成，主要用来定义一些规则约束代码，我们这里主要讲在vscode插件中的ESLint

与VScode 集成

在插件市场中搜ESLint，安装好插件，然后在IDE settings.json中配置（也可以直接打开配置找到编辑器配置手动修改）：

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

集成 husky 和 lint-staged

提交代码前进行lint和修复。需要集成如下两个工具：

  • husky：在git的相应阶段(pre-commit、commit-msg、pre-push)触发配置的命令。
  • lint-staged：在git暂存的文件上运行linters，历史文件忽略。

配置husky

1. 安装依赖

npx husky-init && npm install
复制代码

该命令 安装了husky依赖；创建了.husky目录，其中包含pre-commit hook文件，可在里面配置hook触发时的命令；package.json中增加了一条script：

{
    "scripts": {
        "prepare": "husky install"
    }
}

复制代码

2. 配置.husky/pre-commit

之后修改.husky/pre-commithook文件：

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

eslint --fix ./src --ext .vue,.js,.ts
复制代码

配置 lint-staged

1. 安装依赖

npm i lint-staged -D
复制代码

2. 在package.json中添加：

{
  // ...
  "lint-staged": {
    "*.{vue,js,ts}": "eslint --fix" // 自行根据需要配置
  },
}
复制代码

表示只对 git 暂存区的.vue、.js、.ts文件执行eslint --fix。

3. 修改.husky/pre-commithook：

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

# eslint --fix ./src --ext .vue,.js,.ts # 这样会对历史记录文件lint

npx lint-staged # 只对本次add的文件lint
复制代码

这样，在每次执行git commit时，会先对git staged中的文件进行Lint。

Prettier

与eslint的区别是，它只管代码格式，不管是否有什么语法错误，不关注代码质量。支持JS、TS、JSON、CSS、Vue、React等多种语言。

与ESLint一起使用

由于Prettier中关于format的规则和ESLint会有冲突，需要先安装如下的包，关闭ESLint中关于format的规则，采用Prettier中的规则：

此外，还能让Prettier作为ESLint的一项规则来使用，需安装如下插件：

  • eslint-plugin-prettier：让Prrettier作为一个linter rule运行。这样IDE能直接使用与Linter的集成方案。

配置.eslintrc.js文件，将plugin:prettier/recommended作为最后一个extention：

{
  "extends": ["plugin:prettier/recommended"]
}
复制代码

它展开来就是：

{
  "extends": ["prettier"], // eslint-config-prettier
  "plugins": ["prettier"], // 注册eslint-plugin-prettier
  "rules": {
    "prettier/prettier": "error", // 打开该插件提供的规则，并且是作为eslint的一条规则运行
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off"
  }
}
复制代码

与VScode集成

VScode中安装插件Prettier，然后settings.json中指定formatter：

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": { // 可指定某种语言的文件用prettier
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
   "editor.formatOnSave": true
}
复制代码

注：如果与ESlint一起使用，安装了eslint-plugin-prettier，那么它是作为ESLint的一条规则运行的，无需再单独为prettier配置VSCode，走ESlint的集成就行:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

React项目中eslint和prettier的配置

VScode插件eslint和prettier如果项目中有.eslintrc.js和prettier.js这样的配置文件的话，配置eslint和prettier插件的配置是不生效的，优先读取项目中的配置文件，所以除非项目中没有.eslintrc.js和prettier.js配置文件才去设置-->扩展里配置这俩插件，否则优先写入配置文件规则

React项目.eslintrc.js文件

module.exports = {
  "root": true,
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "jest": true
  },
  "extends": [
    "react-app", // create react app已集成
    "react-app/jest", // create react app已集成
    "eslint:recommended", // create react app已安装，使用eslint中recommened的规则
    "plugin:react/recommended", // create react app已安装, recommended react linting configs
    "plugin:@typescript-eslint/recommended", // 需额外手动安装 @typescript-eslint/eslint-plugin
    "plugin:react-hooks/recommended", // create react app已安装, hooks相关的lint config
    "plugin:prettier/recommended" // 安装好Prettier再添加，可先删除
  ],
  "plugins": ["react", "@typescript-eslint"],
  "parser": "@typescript-eslint/parser", // 需手动安装 @typescript-eslint/parser，This allows Eslint to understand TypeScript syntax
  "parserOptions": {
    "ecmaVersion": 11,
    "ecmaFeatures": {
      "jsx": true // Allows for the parsing of JSX
    },
    "sourceType": "module", // Allows for the use of imports
    "project": "./tsconfig.json"
  },
  "settings": {
    "react": {
      "pragma": "React",
      "version": "detect" // Tells eslint-plugin-react to automatically detect the version of React to use
    }
  },
  "rules": {
    "no-debugger": "off",
    "no-console": "off",
    "import/first": "error",
    "react/prop-types": "off"
  }
}
  • .prettierrc
{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "semi": false
}

然后最后还需要配置vscode的配置setting.json，因为需要配置并指定编辑器保存自动格式化的配置使用哪一个

  • .vscode/setting.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.options": {
    "configFile": ".eslintrc.js"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

既然有vscode插件，那么还装eslint的npm包吗？

要装。虽然vscode插件也可以单独配置格式，但是如果项目中有.eslintrc.js文件，那么eslint插件会优先执行.eslintrc.js文件的配置。
并且不是每个人都会装eslint的vscode插件。此时eslint的npm包就作为一个保障，并且里面的.eslintrc.js配置就作为标准配置。
装vscode插件只是为了方便自己开发而已。

注：一般不会直接通过设置-->扩展对eslint和prettier插件进行配置因为不同的项目lint规则和格式化规则可能不同，所以应该在项目的维度进行配置，不同的项目使用不同的eslint.(js|rc|json)和prettier.(js|rc|json)去配置

ESlint插件和prettier插件这两个Vscode插件只是为了辅助开发的，可以结合vscode编辑器自动保存设置去调用对应的npm包eslint去检查代码的，以及在编辑器中检查到不规范的代码会有提示以及fix，要把他俩和项目中的npm包eslint和prettier区分

项目多人开发中，需要注意如果团队中使用的规范性工具不一样，就没必要强行使用ESLint和Prettier插件，以及没必要对vscode设置保存时格式化，因为强行格式化可能会导致代码风格编乱，导致代码冲突问题很严重

使用vscode自带的格式化文档就好，vscode自带的有对各种类型包括(html css js ts等文件的)的格式化，右键----格式化文档即可

总结

只要项目中存在eslintrc和prettierrc等配置文件，就只需要在插件商店安装ESLint和Prettier插件即可无需对其就行配置，因为他们优先读取配置文件，只需要使用他俩的可视化修复以及智能提示作用，至于vscode编辑器配置自动保存格式化需结合具体情况，实在不行使用vscode默认的格式化文档也足够了。

avatar
文章
阅读
粉丝