ESLint介绍

• 最为流行的JavaScript lint 工具监测JS代码质量
• ESLint很容易统一开发者的编码风格
• ESLint可以帮助开发者提升编码能力

初始化项目

npm init --yes

安装ESLint依赖

npm i eslint -D

查看版本

npx eslint -v

初始化ESLint(选3、1)

npx eslint --init

自动修复部分警告

npx eslint .\01.js --fix

事实证明，上面都是新手上路学习的，小白龙直接带你上高速

目录结构

|-- 项目名称
    |-- .editorconfig             //编辑器配置文件
    |-- .eslintignore             //eslint忽略文件
    |-- .eslintrc.js              //eslint配置文件
    |-- .gitattributes            //eslint配置文件
    |-- .gitignore                //git忽略文件
    |-- .prettierignore           //prettier忽略文件
    |-- .prettierrc.js            //prettier配置文件
    |-- .stylelintignore          //stylelint忽略文件
    |-- .stylelintrc.js           //stylelint配置文件
    |-- .vscode
    |   |-- settings.json         //vscode编辑器配置文件

vscode配置

插件	功能	图片
Vetur	识别vue文件
Prettier	格式化代码
ESLint	规范js代码
StyleLint v0.87.6	规范css代码

在项目根目录，新建.vscode 配置settings.json

{
  //根据文件后缀名定义vue文件类型
  "files.associations": {
    "*.vue": "vue"
  },
  //配置 ESLint 检查的文件类型
  "eslint.validate": ["javascript", "javascriptreact", "html", "vue"],
  //保存时
  "editor.codeActionsOnSave": {
    //eslint自动修复js错误
    "source.fixAll.eslint": true,
    //StyleLint自动修复css错误
    "source.fixAll.stylelint": true
  },
  "editor.formatOnSave": true,

  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

在 package.json文件的 scripts加上命令, 规则检查自动修复js

依赖	说明
eslint	检查
eslint-config-standard	规范
eslint-config-prettier	解决eslint和prettier冲突

可以先用eslint初始化出.eslintrc.js，然后再安装eslint-config-standard和eslint-config-prettier(走高速的，可以忽略这段话)

npm i -D   babel-eslint eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-vue eslint-config-prettier

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: ["plugin:vue/recommended", "standard", "prettier"],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: "module",
  },
  plugins: ["vue"],
  // 设置全局变量,根据自己项目需求
  globals: {
    _lang: true,
    APP: true,
    JSInterface: true,
    finishSign: true,
    __area: true,
    __lang: true,
    _host: true,
    _app: true,
    _area: true,
    hosts: true,
    _hash: true,
    _env: true,
    _test: true,
    _images: true,
    assetsRetry: true,
    AdjustDeepLink: true,
  },
  rules: {
    // 禁止校验v-html xss风险
    "vue/no-v-html": 0,
  },
};

在 package.json文件的 scripts加上命令,lint为修复js错误，style为修复css错误

"lint": "eslint --ext .js,.vue src --fix   stylelint *.scss,css,.vue",

"style": "stylelint 'src/**/*.(vue|scss|css)' --fix"

webpack配置

{
 test: /\.(js|vue)$/,
 use: {
  loader: "babel-eslint",
 },
 enforce: "pre", // 编译前检查
 include: [resolve("src")],
},

stylelint 介绍

• 强大的现代 linter，可帮助您避免错误并强制执行样式中的约定。
• 了解最新的 CSS 语法，包括自定义属性和 4 级选择器
• 从 HTML、markdown 和 CSS-in-JS 对象和模板文本中提取嵌入的样式
• 解析类似 CSS 的语法，如 SCSS、Sass、Less 和 SugarSS
• 有超过170 个内置规则来捕获错误、应用限制和强制执行风格约定
• 支持插件，因此您可以创建自己的规则或使用社区编写的插件
• 自动修复大多数风格违规

安装

依赖	功能
stylelint	检查
stylelint-config-standard	规范
stylelint-config-rational-order	书写顺序
stylelint-config-prettier	解决冲突

npm i -D stylelint@13.13.1 stylelint-config-standard@22.0.0 stylelint-config-rational-order@0.1.2 stylelint-config-prettier@8.0.2 stylelint-scss@3.21.0

根目录创建 stylelint.config.js 文件

module.exports = {
  extends: [
    "stylelint-config-standard",
    "stylelint-config-rational-order",
    "stylelint-config-prettier",
  ],
  plugins: ["stylelint-scss"],
  //, "stylelint-prettier"
  rules: {
    //在字符串周围指定单引号或双引号。
    //"string-quotes": "single",
    "property-no-unknown": [
      true,
      {
        ignoreProperties: ["composes"],
      },
    ],
    "selector-pseudo-class-no-unknown": [
      true,
      {
        ignorePseudoClasses: ["global"],
      },
    ],
    "at-rule-no-unknown": null,
    "scss/at-rule-no-unknown": null,
  },
};

忽略stylelint对css的检验

忽略整个文件，在首行加入 /* stylelint-disable */

/* stylelint-disable */
html {}

忽略多行

/* stylelint-disable */
html {}
.div {
    color: red;
}
/* stylelint-enable */

忽略一行， 在样式前加入 /* stylelint-disable-next-line */ 以忽略该行

#id {
  /* stylelint-disable-next-line */
  color: pink !important;
}

在 .stylelintrc.json 內设定需要忽略的文件

{
  ignoreFiles: ["dist/**/*", "src/assets/scss/abc.scss"]
}

husky + lint-staged 构建代码工作流

• husky是一个 Git Hook 工具,它可以在代码提交前允许我们做一些事情，从而防止一些不好的代码被提交上去。

• lint-staged是针对工作区修改的文件,这对我们只希望处理将要提交的文件将会非常有用。

安装 husky lint-staged 依赖

注意 windows 用户需要使用 npm 包管理器安装不然 git hooks会失效

yarn add -D husky lint-staged

配置 husky & lint-staged

• 我们需要在代码提交前对代码做一下格式化并且如果代码不符合规范就不让提交,简单的做法就是在husky的pre-commit钩子去运行 lint-staged,lintstaged 主要就干了三件事：

• 第一件就是调用eslint --ext .js,.vue src --fix 修复不合符eslint规范的代码。

• 第二件stylelint 'src/**/*.(vue|scss|css)' --fix修复不合符css规范的代码。

• 最后如果都通过了就允许代码commit。

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*{.ts,.js}":[
      "eslint --ext .js,.vue src --fix",
      "stylelint 'src/**/*.(vue|scss|css)' --fix",
      "git add"
    ]
  }

2022/8/27加强版本

安装husky

pnpm add husky -D

快速创建husky目录

npx --no-install husky install

--no-install 参数表示强制 npx 使用项目中 node_modules 目录下的husky依赖包

在.hucky文件夹中创建pre-commit文件

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

npm run lint

pre-commit 在 commit 之前会执行 npm run lint 校验代码，可以定义你的执行脚本，校验不通过不允许 commit 提交

commitizen

commitizen 是一个撰写符合 Commit Message 标准的一款工具。通过它可以实现交互式撰写规范的 Commit Message。

pnpm  add commitizen -D

安装完成后，一般我们都采用符合 Angular 的 Commit message 格式的提交规范，运行以下命令生成符合 Angular 提交规范格式的 Commit message

npx --no-install commitizen init cz-conventional-changelog --save-dev --save-exact

在 package.json scrips 添加 "commit": "git-cz" 命令

scripts: {
  "commit": "git add ./ && git-cz"
}

限制 commitlint

由于 commitizen 并不是强制使用的，仍然可以通过 git commit 来提交，所以不管是 git-cz 还是 git commit 提交前，都要对 commit messag 进行一次校验，不符合规范的情况下是不允许进行 commit

pnpm add @commitlint/cli @commitlint/config-conventional -D

在.hucky文件夹中创建commit-msg文件

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

npx --no-install commitlint --edit $1

根目录创建配置文件 commitlint.config.js

module.exports = {
  ignores: [(commit) => commit.includes('init')],
  extends: ['@commitlint/config-conventional', 'cz'],
  rules: {
    'body-leading-blank': [2, 'always'],
    'footer-leading-blank': [1, 'always'],
    'header-max-length': [2, 'always', 108],
    'subject-empty': [2, 'never'],
    'type-empty': [2, 'never'],
    'subject-case': [0],
    'type-enum': [
      2,
      'always',
      [
        'feat',
        'fix',
        'perf',
        'style',
        'docs',
        'test',
        'refactor',
        'build',
        'ci',
        'chore',
        'revert',
        'wip',
        'workflow',
        'types',
        'release'
      ]
    ]
  }
}

上面的提示都是英文的，如果想自定义翻译成中文，需要安装 cz-customizable 来实现自定义 commit message 规则，以及安装对应的 commitlint-config-cz 来配套校验

pnpm add cz-customizable  commitlint-config-cz -D

项目根目录，创建一个 .cz-config.js 文件

// .cz-config.js
module.exports = {
  types: [
    { value: ':sparkles: feat', name: '✨ feat: 一项新功能' },
    { value: ':bug: fix', name: '? fix: 修复一个Bug' },
    { value: ':memo: docs', name: '? docs: 文档变更' },
    { value: ':lipstick: style', name: '? style: 代码风格，格式修复' },
    { value: ':recycle: refactor', name: '♻️ refactor: 代码重构，注意和feat、fix区分开' },
    { value: ':zap: perf', name: '⚡️ perf: 代码优化,改善性能' },
    { value: ':white_check_mark: test', name: '✅ test: 测试' },
    { value: ':rocket: chore', name: '? chore: 变更构建流程或辅助工具' },
    { value: ':rewind: revert', name: ':rewind: revert: 代码回退' },
    { value: ':tada: init', name: '? init: 项目初始化' },
    { value: ':construction_worker: ci', name: '? 对CI配置文件和脚本的更改' },
    { value: ':package: build', name: '?️ build: 变更项目构建或外部依赖' },
    { value: ':construction: WIP', name: '? WIP: 进行中的工作' }
  ],
  scopes: [
    { name: 'component' },
    { name: 'config' },
    { name: 'docs' },
    { name: 'src' },
    { name: 'examples' },
    { name: 'play' }
  ],
  // allowTicketNumber: false,
  // isTicketNumberRequired: false,
  // ticketNumberPrefix: 'TICKET-',
  // ticketNumberRegExp: '\\d{1,5}',
  // it needs to match the value for field type. Eg.: 'fix'
  // scopeOverrides: {
  //   feat: [
  //     { name: 'element' }
  //   ],
  //   fix: [
  //     { name: 'element' },
  //     { name: 'style' },
  //   ]
  // },
  // override the messages, defaults are as follows
  messages: {
    type: '请选择提交类型(必填):',
    scope: '请选择一个scope (可选):',
    customScope: '请输入文件修改范围(可选):',
    // used if allowCustomScopes is true
    subject: '请简要描述提交(必填):',
    body: '请输入详细描述，使用"|"换行(可选):\n',
    breaking: '列出任务非兼容性说明 (可选):\n',
    footer: '请输入要关闭的issue，例如：#12, #34(可选):\n',
    confirmCommit: '确定提交此说明吗？'
  },
  allowCustomScopes: true,
  allowBreakingChanges: ['feat', 'fix'],
  // 限制 subject 长度
  subjectLimit: 72
  // 跳过问题 skip any questions you want
  // skipQuestions: ['body', 'footer'],
  // breaklineChar: '|', // It is supported for fields body and footer.
  // footerPrefix : 'ISSUES CLOSED:'
  // askForBreakingChangeFirst : true, // default is false
}

创建完 .cz-config.js 文件后，我们需要回到 package.json 文件中，将 config.commitizen.path 更改为 node_modules/cz-customizable

{
  "config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"
    }
  }
}

为了提交更好看，在 commit 头部添加了表情 gitmoji，需要安装这个插件

pnpm add commitlint-config-gitmoji -D

修改 .commitlintrc.js 内容

module.exports = {
  // extends: ['@commitlint/config-conventional', 'cz'],
  extends: ['gitmoji']
}

执行 pnpm commit 可以看到带表情的中文 commit message