前端规范化校验（ESLint）

为什么要有规范标准

软件开发需要多人协同
不同开发者有不同编码习惯和喜好
不同喜好和习惯增加项目维护成本
每个项目或团队需要明确统一标准，避免不统一带来的麻烦

哪里需要规范化标准

代码、文档、提交日志
开发过程中人为编写的成果
代码标准化规范最重要

实施规范化的方法

编码前人为的标准约定
通过工具实现（Lint），更可靠更便捷

常见规范化的实现方式

借助于 EditorConfig + Prettier + ESLint 的组合，项目中通过统一约定配置，可以在团队成员开发过程中检查、约束、美化代码，统一编码风格，可以省去很多的沟通成本，提前暴露代码缺陷，减少后期二次修改代码的风险。

EditorConfig：跨编辑器和IDE编写代码，保持一致的简单编码风格；
Prettier：专注于代码格式化的工具，美化代码；
SLint：作代码质量检测、编码风格约束等；

他们各有适用范围，我们重点关注ESLint。

- ESLint介绍

最为主流的javascript Lint工具

监测JS代码质量。
ESLint很容易统一开发者的编码风格。
ESLint可以帮助开发者提高编码水平。

- ESLint工具使用

安装步骤：
初始化项目 → 安装ESLint模块为开发依赖 → 通过CLI命令验证安装结果

npm init
npm install eslint --dev

eslint 提供了cli的程序，安装完成后，项目node_modules/.bin目录下，就会生成一个 eslint 可执行文件，后续可以直接通过这个cli文件检测代码中的问题。在终端通过目录找到这个eslint文件，通过 --version 可查看对应的版本号。
cd .\node_modules\.bin\
.\eslint --version

或使用快捷方式直接找到cli：
npx eslint --version (npx 是npm 最新版本的集成工具)
yarn eslint --version

定制ESLint校验规则 初始化一个eslint配置文件 npx eslint --lint
建议选择第三种（检验语法、问题代码、代码风格），使代码质量得到最大的保证。

初始化完成，就可以使用eslint检测代码问题
npx eslint .\src\test.js 下图可见，第一次执行eslint检测时，会先抛出语法错误，如果语法问题没有解决，eslint是没有办法检测问题代码和代码风格。此时根据提示解决语法问题，然后可以使用 --fix 可以修复绝大多数问题代码和风格。 npx eslint .\src\test.js --fix

建议一开始先手动修正问题代码和代码风格，以便养成良好的编码习惯，eslint只是作为工具做最后的检验

.eslintrc.js 基础配置注释（如下）：

// CommonJS语法
module.exports = {
  // 标记当前代码最终的运行环境
  env: {
    browser: true, // 浏览器环境，可使用document、window
    es2021: true
  },
  // 设置多个共享配置
  extends: [
    'plugin:vue/essential',
    'standard'
  ],
  // 只是检测语法，具体成员是否可用要看运行环境
  parserOptions: {
    ecmaVersion: 'latest'  // ECMAScript版本
  },
  plugins: [
    'vue'
  ],
  // ESLint每个规则的关闭off，警告warn，开启报错error
  rules: {
  },
  // 声明额外的全局成员，例如全局jQuery对象
  globals: {
    "jQuery": "readonly"
  }
}

在需要关闭eslint校验的当前行后面，添加以下注释，即可关闭对当前行的eslint校验
// eslint-disable-line
默认禁用所有规则校验，建议加上具体要禁用的规则名称
// eslint-disable-line no-template-culy-in-string

const str = "${name} is a coder" // eslint-disable-line no-template-culy-in-string

- ESLint结合自动化工具或Webpack

与自动化工具继承，使ESLint一定会工作
与项目统一，管理更加方便

使用gulp自动化工具(关于gulpfile.js)（需要提前安装使用到的模块）。

// gulpfile.js 在gulp配置文件中，在 js 构建任务添加 eslint 检验 
const plugins = require("gulp-load-plugins")

const script = () => {
    return src('src/assets/scripts/*.js', { base: 'src' })
    .pipe(plugins.eslint())
    .pipe(plugins.eslint.format())
    .pipt(plugins.eslint.failAfterError())
    .pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('temp'))
    .pipe(bs.reload({ stream: true }))
}

结合 webpack（需要提前安装使用到的模块）
注意： webpack module rules里loader是从右向左，从下往上的顺序执行

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode: 'production',
    entry: './src/main.js',
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: 'babel-loader'
        }, {
            test: /\.js$/,
            exclude: /node_modules/,
            use: 'eslint-loader',
            enforce: 'pre'
        }, {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        })
    ]
}

现代化Vue、React框架项目里，他们的cli工具已经把webpack、eslint这些集成进去，因此无需我们再花大量时间去配置工具的使用，开发者可以更专注于业务工嗯呢该的开发。

ESLint对Typescript的支持 tslint 官方已放弃维护
使用 parser 指定一个语法解析器

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'plugin:vue/essential',
    'standard'
  ],
  // parser：指定一个语法解析器
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest'
  },
  plugins: [
    '@typescript-eslint'
  ],
  rules: {
  },
}

Stylelint工具的使用 ESLint 是对js 的校验，Stylelint 是对样式进行校验。
提供默认的代码检查规则
提供CLI工具，快速调用
通过插件支持Sass、 Less PostCss
支持gulp 或 webpack继承

安装 npm i stylelint -D
需要先手动安装共享配置模块再继承，
如 stylelint-config-standard
如 stylelint-config-sass-guidelines校验sass代码
新建 .stylelintrc.js

// .stylelintrc.js
module.exports = {
    extends: [
        "stylelint-config-standar",
        "stylelint-config-sass-guidelines"
    ]
}

- 基于ESLint的衍生工具

Prettier 一款很强大的、通用的前端代码格式化工具，几乎可以完成所有类型文件代码的格式化工作。

安装：npm i prettier -D
对指定文件执行校验：npx prettier style.css (会直接在终端输入校验结果)
npx prettier style.css --write(校验结果直接覆盖源文件)
npx prettier . --write (格式化所有文件)

不要过于依赖格式化校验工具，在编程过程中就应该严格遵守规范化格式编码

ESLint 结合 Git Hooks

通过Git Hooks 在代码提交前强制lint检查

Git Hooks 介绍： Git Hooks 也称为 git 钩子，每个钩子对应一个任务。通过 shell 脚本可以编写钩子任务

对于不擅长使用shell，可以结合 Husky 的npm模块，实现Git Hooks 的使用需求。

// package.json  实现提交前强制格式化代码
{
    "scripts": {
        "precommit": "lint-staged"
    },
    "husky": {
        "hooks": {
            "pre-commit": "npm run test"
        }
    },
    "lint-staged": {
        "*.js": {
            "eslint",
            "git add"
        }
    }
}

如果对你有帮助了麻烦动动小指头点个赞，欢迎在下方评论区给我留言~~