开始前的准备

试验使用应用版本为node v10.16.0和yarn v1.12.3

新建项目空文件夹, 初始化package.json, 使用命令yarn init

初始化git, 使用命令git init

lint

可以理解为是代码书写规范的检测工具, lint分为JSLint(《JavaScript语言精粹》有一章就是讲JSLint的)、JSHint(基于JSLint, 可配置)、ESLint(现在项目普遍使用的), 我们这里使用的是ESLint

ESLint

文档

项目地址: ESLint Github 🔗

项目官网: ESLint 🔗

项目中安装ESLint并初始化

安装依赖包yarn add eslint --dev

初始化eslint生成.eslintrc文件, 执行命令: npx eslint --init或node ./node_modules/eslint/bin/eslint.js --init, 将--init换成--version查看版本, 博主试验版本为v6.8.0, 初始化步骤如下:

# purpose:
  选择ESLint的主要作用, 有: 检查语法、查找错误、强制性代码样式
  第3个选项相比第2个选项, 会增加几个常用代码风格的配置, 如: 使用Tab还是Space、使用单引号还是双引号等.
? How would you like to use ESLint?
  To check syntax only                                               <仅检查语法>
  To check syntax and find problems                                  <检查语法并查找错误>
  To check syntax, find problems, and enforce code style             <检查语法、查找错误和强制性代码样式>

# moduleType:
  项目中使用模块化标准的类型, 选项有: JavaScript modules、CommonJS、其它
? What type of modules does your project use? (Use arrow keys)
  JavaScript modules (import/export)                                 <ECMAScript 模块导入导出规范, 即esm>
  CommonJS (require/exports)                                         <NodeJS的CommonJS模块导入导出规范>
  None of these

# framework:
  项目中使用的前端框架, 选项有: React、Vue、其它
? Which framework does your project use? (Use arrow keys)
  React
  Vue.js
  None of these

# typescript:
  是否使用TypeScript
? Does your project use TypeScript? (y/N)

# env:
  代码的运行环境, 空格键表示选择, a键表示全选, i键表示反向切换, 选项有: 浏览器、NodeJS
? Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Browser                                                           <浏览器环境>
 ◯ Node                                                              <NodeJS环境>

# source: (当purpose选择第3个选项时执行问询)
  如何为项目定义样式
? How would you like to define a style for your project? (Use arrow keys)
  Use a popular style guide                                          <使用一个流行风格>
  Answer questions about your style                                  <回答有关您的风格的问题>
  Inspect your JavaScript file(s)                                    <检查JavaScript文件>

# styleguide: (当source选择第1个选项时执行问询)
  选择代码样式规范, 选项有: Airbnb、Standard、Google
? Which style guide do you want to follow?
  Airbnb: https://github.com/airbnb/javascript                       <Airbnb风格>
  Standard: https://github.com/standard/standard                     <standard风格>
  Google: https://github.com/google/eslint-config-google             <google风格>

# patterns: (当source选择第3个选项时执行问询)
  应该检查file(s)、path(s)或glob(s), 输入非空字符串
? Which file(s), path(s), or glob(s) should be examined

# format:
  选择配置文件类型, 选项有: JavaScript、YAML、JSON
? What format do you want your config file to be in? (Use arrow keys)
  JavaScript
  YAML
  JSON

# installESLint: (当source选择第1个选项时执行问询)
  根据前面的选项, 列出所有需要额外安装的包, 并询问是否安装
? Would you like to install them now with npm? (Y/n)

# enforce code style: (当source选择第2个选项是执行系列问询)
  代码块缩进使用Tab还是使用Spaces?
? What style of indentation do you use? (Use arrow keys)
  Tabs
  Spaces
  引号时使用双引号还是但引号?
? What quotes do you use for strings? (Use arrow keys)
  Double
  Single
  换行符使用Unix(\n)还是使用Windows(\r\n)
? What line endings do you use? (Use arrow keys)
  Unix
  Windows
  是否使用分号作为语句断尾;
? Do you require semicolons? (Y/n)

博主的选择和回答

? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? CommonJS (require/exports)
? Which framework does your project use? React
? Does your project use TypeScript? Yes
? Where does your code run? Browser, Node
? How would you like to define a style for your project? Answer questions about your style
? What format do you want your config file to be in? JSON
? What style of indentation do you use? Spaces
? What quotes do you use for strings? Single
? What line endings do you use? Unix
? Do you require semicolons? Yes

生成的.eslintrc.json文件

{
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/eslint-recommended"
  ],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018
  },
  "plugins": [
    "react",
    "@typescript-eslint"
  ],
  "rules": {
    "indent": [
      "error",
      4
    ],
    "linebreak-style": [
      "error",
      "unix"
    ],
    "quotes": [
      "error",
      "single"
    ],
    "semi": [
      "error",
      "always"
    ]
  }
}

CI配置

在package.json的scripts下新增"lint:eslint": "eslint src --ext .ts,.tsx --fix --max-warnings 0"

使用

eslnit规则值有三种:

1. "off"或0: 关闭规则
2. "warn"或1: 仅提示
3. "error"或2: 提示并报错阻止程序运行

如果与webpack配合使用需要与eslint-loader插件一起使用, 点击查看 🔗

过滤

1. 使用.eslintignore文件过滤
2. 过滤整个文件在文件开头添加: /* eslint-disable */
3. 过滤某一行使用: // eslint-disable-next-line