前端工程化——代码规范（ESLint、Prettier、Pre-commit）

前端开发中团队成员的编辑器或者编码习惯不一，可能带来代码阅读或code review的额外负担，可以使用 eslint 、prettier、husky和lint-staged来统一代码风格，并且在存在eslint错误时不允许提交代码。

1. ESLint和Prettier安装

npm i -D eslint prettier

2. ESLint和Prettier配置

在项目根目录下创建.eslintrc文件，我这里使用的是js文件。也可以使用 npm init @eslint/config 命令生成配置文件

下面是配置需要的一些插件：

• eslint-plugin-vue
  • 安装 npm i -D eslint-plugin-vue
  • vue项目中必须的一个插件，它提供了一些与 Vue.js 相关的规则和配置。并且需要在'plugins'中包含'vue'字段
  • 在配置了这个文件后如果在格式化的时候无效，可能是默认的格式化配置问题。需要选择一下默认的格式化配置，选择prettier
    

• @vue/eslint-config-typescript
  • 安装 npm i -D @vue/eslint-config-typescript
  • vue项目中使用，在extends中需要配置@vue/typescript/recommended

• eslint-plugin-prettier
  • 安装 npm i -D eslint-plugin-prettier
  • 这个插件使 ESLint 可以运行 Prettier 作为 ESLint 的规则。不需要在配置文件的plugins字段中显式添加prettier。

• eslint-config-prettier
  • 安装 npm i -D eslint-config-prettier
  • 用于关闭 ESLint 中与 Prettier 有冲突的规则，以避免二者之间的规则冲突。需要在extends字段中添加它。

// .eslintrc.js

module.exports = {
	// 环境配置
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    '@vue/typescript/recommended',
    'prettier',
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    'vue/multi-word-component-names': 'off',
  },
}

3. husky和lint-staged安装

• 安装依赖

npm i -D husky lint-staged

• 执行husky，生成husky文件

npx husky install 

• 修改package.json

// 运行命令
npm pkg set scripts.prepare="husky install"
// 增加配置
"husky": {
  "hooks": {
     "pre-commit": "lint-staged"
   }
 },
"lint-staged": {
	"src/**/*.{js,ts,vue,jsx,tsx}": [
	// 格式化
	"prettier --write .",
	// eslint检查
	"eslint --fix"
}

• 添加pre-commit

// 这个命令需要再husky9一下才支持
npx husky add .husky/pre-commit "npx lint-staged"

如上配置好后就可以使用git commit xxx来测试提交前是否检查eslint错误了。如果未生效可以使用npx eslint --fix .检查eslint配置是否正确。eslint配置正确再检查package.json中lint-staged的配置是否匹配文件后缀。
*