使用eslint + prettier + husky + lint-staged 约束项目的最佳实践！

2022-10-26 08:46:32 浏览数 (1)

前言

大家好，我是HoMeTown，最近在搭建一个公司与某一线大厂有合作，需要做一个性能极其优化的微信小程序，我们组正好刚从企微项目里抽出身来，所以这个艰巨的任务就交给我们来完成了，首先开了一天会，跟合作方的前端经理PM 确定好了技术选型以及规范，分工细则下来以后，得到项目架构&少许业务开发的任务，优化交给合作方去做，因此这个项目会有很多人参与进来，一个强有力的项目约束是十分重要的！

eslint

概念

eslint是一个集大成的语法校验工具，他会帮你去规范你的代码，也会帮你fix一部分小问题，支持extends、plugin、rules等属性，他的原理我也在 【源码角度】7分钟带你搞懂ESLint核心原理！这片文章里讲过，感兴趣的朋友可以了解一下，接下来，看看具体配置方法。

这里不做属性以及规则属性的说明，网上一大把，直接贴配置，参考 eslint中文文档

安装

安装所需依赖

代码语言：javascript复制
"@babel/core": "^7.16.7","@babel/eslint-parser": "^7.18.9","@babel/eslint-plugin": "^7.18.10","@ecomfe/eslint-config": "^7.4.0","@typescript-eslint/eslint-plugin": "^5.17.0","@typescript-eslint/parser": "^5.17.0","eslint": "^7.19.0ear","eslint-plugin-prettier": "^4.0.0","eslint-plugin-import": "^2.25.4",

接下来在根目录新建.eslintrc.js

代码语言：javascript复制
// https://eslint.bootcss.com/docs/rules/module.exports = {  root: true,  env: {    es6: true,    browser: true,    node: true
  },  parser: '@typescript-eslint/parser', // 添加解析器
  overrides: [ // 为特定的文件指示处理器
    {      files: ['*.ts'], // 校验所有的ts文件
      extends: [ // 继承eslint规则
        'eslint:recommended',        'plugin:@typescript-eslint/recommended',        'plugin:@typescript-eslint/recommended-requiring-type-checking'
      ],      parserOptions: {        project: './tsconfig.json',        ecmaVersion: 2018,        sourceType: 'module'
      }
    }
  ],  globals: { // 微信小程序
    wx: true,    App: true,    Page: true,    getCurrentPages: true,    getApp: true,    Component: true,    requirePlugin: true,    requireMiniProgram: true
  },  plugins: ['@typescript-eslint', 'prettier']
}

新建.eslintignore，忽略不需要被校验的文件

代码语言：javascript复制
# .eslintignoretypings
node_modules

vscode安装扩展eslint，项目中新建.vscode/settings.json

代码语言：javascript复制
{
  // 主题
  "workbench.colorTheme": "Atom One Light",
  // 缩进
  "editor.tabSize": 2,
  // 保存eslint校验
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.format.enable": true,
  // 校验那些文件
  "eslint.validate": ["typescript", "javascript", "vue", "html"],
  "nuxt.isNuxtApp": false,
  // 终端显示
  "eslint.alwaysShowStatus": true,
  // 加载配置文件
  "eslint.options": { "configFile": ".eslintrc.js" }}

vscode展示如下图，表示开启成功

在package.json中新增命令：

代码语言：javascript复制
"lint": "eslint --fix ./ --ext .ts --ext .js",

测试

执行npm run lint

随便修改一个文件

再执行npm run lint

可以看到已经报错了~

配置成功

prettier

概念

prettier是一个代码格式化工具，配合vscode自动保存可以保证代码风格的统一。

安装

代码语言：javascript复制
"prettier": "^2.5.1",

在项目根目录新建.prettierrc.js，规则参考 Prettier

代码语言：javascript复制
// .prettierrc.jsmodule.exports = {
  printWidth: 120,
  tabWidth: 2,
  useTabs: false,
  semi: false,
  singleQuote: true,  // 对象的 key 仅在必要时用引号
  quoteProps: 'as-needed',  // jsx 不使用单引号，而使用双引号
  jsxSingleQuote: false,  // 末尾不需要逗号
  trailingComma: 'none',  // 大括号内的首尾需要空格
  bracketSpacing: true,  // jsx 标签的反尖括号需要换行
  jsxBracketSameLine: false,  // 箭头函数，只有一个参数的时候，无需括号
  arrowParens: 'avoid',  // 每个文件格式化的范围是文件的全部内容
  rangeStart: 0,

  rangeEnd: Infinity,  // 不需要写文件开头的 @prettier
  requirePragma: false,  // 不需要自动在文件开头插入 @prettier
  insertPragma: false,  // 使用默认的折行标准
  proseWrap: 'preserve',  // 根据显示样式决定 html 要不要折行
  htmlWhitespaceSensitivity: 'css',  // 换行符使用 lf
  endOfLine: 'lf'}

新建.prettierignore文件忽略不需要进行格式化的文件

代码语言：javascript复制
# .prettierignore/node_modules# OS.DS_Store
.idea
.editorconfig
.npmrc
package-lock.json# Ignored suffix*.log*.md
*.svg
*.png
*ignore## Built-files.cache

在.vscode/settings.json中新增一个属性，保存自动格式化

代码语言：javascript复制
"editor.formatOnSave": true

在package.json中新增命令

代码语言：javascript复制
"prettier": "prettier --config .prettierrc.js --write './**/*.{js,ts,scss,css,json}'",

测试

执行命令npm run prettier，他会把你配置的所以需要格式化的文件全部过一遍，并且给你格式化，其实如果配置了formatOnSave是不会再有可格式化的文件的，但是保险起见，在配置git hook的时候，还是跑一下比较好。

成功

husky

概念

husky是一个git hook工具，用于你在提交代码的时候进行自定义的操作。

安装

代码语言：javascript复制
"husky": "^7.0.4",

在package.json中新增命令

代码语言：javascript复制

执行命令创建.husky/pre-commit文件

代码语言：javascript复制
npx husky add .husky/pre-commit "npm run prettier && npm run lint"

根目录下生成如下文件，表示成功

pre-commit内容如下：

代码语言：javascript复制
#!/bin/sh. "$(dirname "$0")/_/husky.sh"npm run prettier && npm run lint

husky默认会跑全部的文件，但是我们其实只校验我们提交( git add . )的文件代码格式，而不是去校验所有的文件的格式，就需要使用lint-staged了

lint-staged

安装

代码语言：javascript复制
"lint-staged": "^12.3.7"

项目根目录新建.lintstagedrc.js文件

代码语言：javascript复制
// .lintstagedrc.jsmodule.exports = {  '*.js': ['prettier --config .prettierrc.js --write', 'eslint --fix --ext .js'],  '*.ts': ['prettier --config .prettierrc.js --write', 'eslint --fix --ext .ts'],  '*.json': 'prettier --config .prettierrc.js --write'}

全部完成以后，当执行git commit -m "xxx"命令时，会对add的文件进行prettier&eslint

json git eslint lint prettier

0 人点赞