3.Lint工具介绍

Lint是一种工具，可以分析源代码，并在出现错误或与团队编码约定不符时通知用户。在某些情况下，它还可以自动修复错误。

虽然已经为不同语言开发了许多种Lint，但是有些人可能遇到过以下问题。

• 这是我第一次使用这种语言进行编码，什么被认为是这种语言的一般编码风格？
• 我正在使用Lint的默认设置，但错误验证过程太严格。
  我想更改设置，但是更改设置会更容易忽略某些错误吗？

即使对于单一语言，也提出了各种编码约定。因此，特别是首先，确定哪些编码约定更好地遵循可能是困难的。

因此，让我们研究一下常用的开源软件上的Lint设置，看看正在使用哪种设置和编码约定。

ESLint

ESLint是JavaScript的linting实用程序。

ESLint不依赖于特定的编码约定，用户也可以自由地启用或禁用各个编码约定。从这个意义上讲，它的一个主要特点是其高度可定制性。

用户可以通过定义原始规则来灵活地设置编码标准，这些规则是ESLint中默认可用的编码规则。此外，第三方共享的着名编码约定，例如“Google JavaScript Style Guide”或“Airbnb JavaScript Style Guide”也可以重复使用。

您甚至可以在遵循这些编码约定的同时启用/禁用特定文件的特定规则。

如果您不知道要开始的设置，可以参考ESLint官方提供的“ 入门 ”指南，以使用建议的编码约定。

核心概念：

• 配置文件：
  .eslintrc，.eslintrc.js，.eslintrc.yml
• Rules：
  • “off” 或 0 - 关闭规则
  • “warn” 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
  • “error” 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

看一个例子：

{
    "rules": {
        "semi": ["error", "never"],
        "quotes": ["error", "single"]
    }
}

也可以写成：

{
    "rules": {
        "semi": [2, "never"],
        "quotes": [2, "single"]
    }
}

• Extends：
  使用别人提供的包， 如google

  { 
    "extends"："google"，
  }

• 通过使用上述说明，用户可以轻松使用Google JavaScript样式指南中的编码约定，而无需从头开始编写设置。

• Plugins:
  ESLint提供的默认规则涵盖了基本规则，但JavaScript可以使用的范围非常广泛。因此，您可能希望规则不在默认规则中。在这种情况下，可以在ESLint中开发自己的独立规则。为了让第三方开发自己的规则，ESLint允许使用插件。如果你在npm中搜索eslint-plugin- *，你可以找到第三方提供的大量自定义插件。
  如果ESLint的默认规则未提供您要使用的规则，则建议您查找插件。
  与可共享配置类似，它很容易设置。例如，如果要对React代码执行静态分析，可以安装名为eslint-plugin-react的插件，并使用以下设置来执行React语法特有的静态分析。

  { 
    "extends": "google"，
    "plugins": [ 
        "react" 
    ]，
    "rules"": { 
        "semi": ["error", "never"],
        "quotes": ["error", "single"]
    } 
  }

起步与安装

1. 在项目中去使用 ```json // npm init 指令会在项目根目录下生成 package.json 文件。 npm init

// —save-dev 会把 eslint 安装到 package.json 文件中的 devDependencies 属性中，意思是只是开发阶段用到这个包，上线时就不需要这个包了。 npm install eslint —save-dev

   - 使用`npm run`
新增`package.json` 脚本，或者使用 `npx`命令
```javascript
"scripts": {
"lint": "eslint src",
"lint:create": "eslint --init"
}

然后使用`run`命令：
```bash
npm run lint

• 直接使用npx命令：

npx eslint --init
// 或者
./node_modules/.bin/eslint --init

1. 在全局使用

   npm install -g eslint

ESLint初始化

配置方法使用 eslint --init方法

➜ npx eslint --init
? How would you like to use ESLint? (Use arrow keys)
  To check syntax only 
❯ To check syntax and find problems 
  To check syntax, find problems, and enforce code style 
? What type of modules does your project use? (Use arrow keys)
❯ JavaScript modules (import/export) 
  CommonJS (require/exports) 
  None of these 
// 这里可以针对你的开发项目进行配置
? Which framework does your project use? 
  React 
  Vue.js 
❯ None of these 
// 可以配置代码运行的地方，是浏览器还是Node环境？
? Where does your code run? 
❯◉ Browser
 ◉ Node
// 最张在哪里缓存
? What format do you want your config file to be in? (Use arrow keys)
❯ JavaScript 
  YAML 
  JSON 
// 成功创建了配置文件
? What format do you want your config file to be in? JavaScript
Successfully created .eslintrc.js file in /Users/itheima/Downloads/Demo

配置文件.eslintrc.js：

废弃的用法：.eslintrc，eslint使用配置的顺序：.eslintrc.js > .eslintrc.yaml > .eslintrc.yml > .eslintrc.json > .eslintrc > package.json

.eslintrc.js文件：

module.exports = {
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": "eslint:recommended",
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "rules": {
    }
};

再来看看，yaml文件配置：

env:
  browser: true
  es6: true
  node: true
extends: 'eslint:recommended'
globals:
  Atomics: readonly
  SharedArrayBuffer: readonly
parserOptions:
  ecmaVersion: 2018
  sourceType: module
rules: {}

该文件导出一个对象，对象包含属性 env、extends、parserOptions、plugins、rules 五个属性：

• env：指定脚本的运行环境。每种环境都有一组特定的预定义全局变量，（如：nodejs，browser，commonjs等）中。

• parserOptions：用于指定想要支持的JavaScript语言选项

  • ecmaVersion - 默认设置为3，5（默认）， 你可以使用 6、7、8 或 9 来指定你想要使用的 ECMAScript 版本。你也可以用使用年份命名的版本号指定为 2015（同 6），2016（同 7），或 2017（同 8）或 2018（同 9）

  • sourceType - 设置为 "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)。

    ecmaFeatures

  • • 这是个对象，表示你想使用的额外的语言特性:
      • globalReturn - 允许在全局作用域下使用 return 语句
      • impliedStrict - 启用全局 strict mode (如果 ecmaVersion 是 5 或更高)
      • jsx - 启用 JSX
• globals：执行代码时脚步需要访问的额外全局变量。
• rules：开启某些规则，也可以设置规则的等级。
• extends: 对默认规则进行扩展，可以使用Airbnb，或者Standard规则。

.eslintignore

可以在项目根目录创建，告诉ESLint忽略某些文件或者目录。相当于.gitignore都是纯文本文件。
例如

# 注释，忽略文件node_modules**/.jsbuild

常见的eslintignore内容：

node_modules/*
**/node_modules/*
dist/*
/build/**
/coverage/**
/docs/**
/jsdoc/**
/templates/**
/tests/bench/**
/tests/fixtures/**
/tests/performance/**
/tmp/**
/lib/rules/utils/unicode/is-combining-character.js
test.js
!.eslintrc.js

ESLint的使用方法

• 本地使用方法：
  如果你想让 ESLint 成为你项目构建系统的一部分，我们建议在本地安装。你可以使用 npm：

  $ npm install eslint --save-dev

• 紧接着你应该设置一个配置文件：

  $ ./node_modules/.bin/eslint --init

• 之后，你可以在你项目根目录运行 ESLint：

  $ ./node_modules/.bin/eslint yourfile.js

• 使用本地安装的 ESLint 时，你使用的任何插件或可分享的配置也都必须在本地安装。

• 全局使用
  如果你想使 ESLint 适用于你所有的项目，我们建议你全局安装 ESLint。你可以使用 npm：

  $ npm install -g eslint

• 紧接着你应该设置一个配置文件：

  $ eslint --init

• 之后，你可以在任何文件或目录运行 ESLint：

  $ eslint yourfile.js

常用ESlint配置

ESLint的规范：

Standard: https://github.com/standard/eslint-config-standard

具体地址：eslintrc.json

Airbnb: https://github.com/airbnb/javascript

1. comma逗号

   rules: {
    "comma-dangle": ["error", "never"],
   }

2. Bad:

   var foo = {
    a: '123',
    b: '321', // wrong error
   }

3. Right:

   var foo = {
    a: '123',
    b: '321'
   }

4. quotes引号

5. semi分号
6. 空行
7. 驼峰命名
8. 日志输出
9. 强等判断
10. 冗余的变量
11. 空格
    • 关键字后的空格
    • 函数名后的空格
    • 缩进

在IDE中的配置

• 以下是vscode中插件配置：

配置文件：

  "eslint.alwaysShowStatus": true,
  "eslint.autoFixOnSave": true,
  "editor.formatOnSave": true,
  "eslint.validate": [
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    }
  ],
  "eslint.options": {
    "plugins": ["html"]
  },

快速修复配置：

打开 "editor.formatOnSave": true并且要打开eslint.validate如上面的配置，或者在UI界面里面设置。

• 在Webstorm中的配置：

使用Configure Preferences

相比于vscode就智能很多。

实战vue项目配置

ESlint配置文件：

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard',
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    semi: ['error', 'never'],
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
}

需要安装的VSCode插件：

• vue(高亮语法)
• vetur(格式化，代码规范)
• Vue peek(组件跳转)
• vue beautify(vue格式化)
• Vue VSCode Snippets 和 Vue Snippets(代码提示)
• Prettier(格式化 与 上面的Vetur其实是合作格式化)

vscode配置格式化：

"eslint.validate": [
  "javascript",
  "javascriptreact",
  {
    "language": "html",
    "autoFix": true
  },
  {
    "language": "vue",
    "autoFix": true
  }
],
"vetur.format.defaultFormatter.js": "prettier-eslint",
  // prettier
"prettier.trailingComma": "es5",
"prettier.semi": false,
"prettier.jsxSingleQuote": true,
"prettier.singleQuote": true,
"prettier.eslintIntegration": true,

配置emmet:

  "emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html"
  },

在Vue-cli工具中，可以使用npm run lint:

// bash输出
➜ npm run lint
> vue-recipe@0.1.0 lint /Users/itheima/vue-demo
> vue-cli-service lint
 DONE  No lint errors found!

来执行vue cli配置好了的Lint脚本：

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

vscode中插件推荐使用： Vue, Vetur, Vue Peek, vue-beautify

实战react项目配置

使用create-react-app创建react项目：

npx create-react-app my-app
cd my-app
npm start

如果npx命令没有，请全局安装create-react-app，使用npm install -g create-react-app

然后是安装eslint相关依赖：

"devDependencies": {
  "eslint": "^5.16.0",
  "babel-eslint": "^10.0.2",
  "eslint-plugin-html": "^6.0.0",
  "eslint-plugin-react": "^7.14.2"
}

配置eslint，或者使用eslint --init进行初始化：

module.exports = {
    "env": {
        "browser": true,
        "commonjs": true,
        "node": true,
        "es6": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true,
            "arrowFunctions": true,
            "classes": true,
            "modules": true,
            "defaultParams": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
    },
    "settings": {
        "react": {
            "pragma": "React",
            "version": "latest",
        },
    },
};

几点配置需要注意：

• 安装插件：eslint-plugin-react
• 配置extends: "plugin:react/recommended"
• 配置settings

配置Airbnb：

npm --save-dev install eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y babel-eslint

有三个依赖：

• eslint-config-airbnb
• eslint-plugin-import
• eslint-plugin-jsx-a11y
• Babel-eslint

修改项目配置：

module.exports = {
    "env": {
        "browser": true,
        "commonjs": true,
        "node": true,
        "es6": true
    },
    // 这里有变化 
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:import/errors",
        "plugin:jsx-a11y/recommended",
        "airbnb"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parser": "babel-eslint",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true,
            "arrowFunctions": true,
            "classes": true,
            "modules": true,
            "defaultParams": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    // 这里有变化 
    "plugins": [
        "react",
        "jsx-a11y",
        "import"
    ],
    "rules": {
      // 这里可以添加jsx-ally与import相关的自定义rules
    },
    "settings": {
        "react": {
            "pragma": "React",
            "version": "latest",
        },
    },
};

StyleLint

官网：https://stylelint.io/

• 安装依赖： ```bash npm install -D stylelint-config-recommended stylelint-config-standard

// yarn yarn add stylelint-config-recommended stylelint-config-standard -D

- 配置忽略

// .stylelintignore 忽略stylelint检查的文件 /src/*/.css

- `.stylelintrc.js`文件配置
```json
module.exports = {
  "extends": ["stylelint-config-recommended", "stylelint-config-standard"],
  "rules": {
    "indentation": 2
  }
}

• vscode配置
  安装Prettier + stylelint插件，方便格式化代码。
  
  配置文件：

  "[scss]": {
    "editor.formatOnSave": true
  },
  // 打开scss的validate配置
  "scss.validate": true,

HTMLHint

官网：https://htmlhint.io

github: https://github.com/htmlhint/HTMLHint

• 安装依赖： ```bash npm install htmlhint —save-dev

// yarn yarn add htmlhint -D

- 配置忽略

// .stylelintignore 忽略stylelint检查的文件 /src/*/.css

- `.htmlhintrc`文件配置
```json
/**
标签名必须小写
属性名必须小写
属性值必须放在双引号中
属性值一定不可为空
属性值一定不可重复
Doctype必须是 HTML 文档的第一行
标签必须成对
标签必须自封闭
特殊字符必须
ID 属性必须唯一
src 属性一定不可为空
title 属性必须出现在标签中
img 标签必须包含 alt 属性
Doctype 必须是 HTML5
ID 和 Class 的命名规则必须统一
不该使用样式标签
不该使用行内样式
不该使用行内脚本
空格和制表符一定不可混合在行前
ID 和 Class 一定不可使用广告关键词
href 必须是绝对路径或者相对路径
属性值一定不可使用不安全字符
script 标签不该使用在头部
*/
{
  "tagname-lowercase": true, 
  "attr-lowercase": true,
  "attr-value-double-quotes": true,
  "attr-value-not-empty": false,
  "attr-no-duplication": true,
  "doctype-first": true,
  "tag-pair": true,
  "empty-tag-not-self-closed": true,
  "spec-char-escape": true,
  "id-unique": true,
  "src-not-empty": true,
  "title-require": true,
  "alt-require": true,
  "doctype-html5": true,
  "id-class-value": "dash",
  "style-disabled": false,
  "inline-style-disabled": false,
  "inline-script-disabled": false,
  "space-tab-mixed-disabled": "space",
  "id-class-ad-disabled": false,
  "href-abs-or-rel": false,
  "attr-unsafe-chars": true,
  "head-script-disabled": true
}

• vscode配置
  安装Prettier，HTMLHint插件，方便格式化代码。
  
  用户配置文件：

  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // 打开scss的validate配置
  "files.associations": {
      "*.ext": "html"
  },