规范化标准

规范化是前端工程化很重要的部分，有时候却往往被我们忽略

• 为什么需要规范化标准

软件开发需要多人协作，不同的人不同的编码风格和喜好，不同的风格增加了维护成本，代码的规范决定了项目的质量，开发过程中需要的代码，文档，提交日志都需要规范化

• ESLint 快速上手

$ yarn add eslint -S
$ yarn eslint --version
// 使用之前必须先配置esLint
$ yarn eslint --init
// 根据项目需要回答完命令行交互的问题，自动生成.eslintrc.js 文件
// 根据配置自动修正代码分格
$ yarn eslint [filepath] --fix

• 配置文件

// .eslintrc.js
module.exports = {
  // 根据环境判断全局成员是否可用，其他环境参见下图
  env: {
    browser: true,
    es2020: true,
  },
  // 继承共享一些其他的配置
  extends: ['standard'],
  // 控制是否使用某一个ES版本的语法
  parserOptions: {
    ecmaVersion: 11,
  },
  rules: {
    // 表示不能使用alert()
    'no-alert': 'error', //off 关闭 // warn 警告 // error 错误
    // ...
  },
};

env设置

• 配置注释

const str1 = '${name} is a coder'; // eslint-disable-line
// 临时禁用当前行校验

const str2 = '${name} is a coder'; // eslint-disable-line no-template-curly-in-string
// 临时禁用当前行具体某个规则

其他配置注释参见这里

• eslint 结合自动化工具

  以 gulp 为例

$ yarn add gulp-eslint -D
const script = () = {
  return src('src/**/*.js',{ base: 'src' })
    .pipe(plugins.eslint())
    .pipe(plugins.eslint.format())// 将信息输出到日志
    .pipe(plugins.eslint.failAfterError())// 校验不通过终止程序
    // ...
}

• eslint 集成 webpack
  react 项目为例

$ yarn add eslint-loader -D
$ yarn add eslint-plugin-react -D // 支持React的语法校验
// webpack.config.js
module: {
    rules: [
       {
        enforce: 'pre',
        test: /\.(js|jsx|ts|tsx)$/,
        loader: 'eslint-loader',
        exclude: /node_modules/,
      },
      // ...
    ],
  },
// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2020: true,
  },
  extends: ['standard'],
  parserOptions: {
    ecmaVersion: 11,
  },
  rules: {
    'react/jsx-uses-react': 2 // 2表示开启error提示
    'react/jsx-uses-vars': 2
  },
  plugin: [
    'react' // eslint-plugin-react的简写
  ]
};
// 以上配置需要手动添加开启每个规则，而eslint-plugin-react为我们提供了可以共享的默认开启,采用以下方式配置：
module.exports = {
  env: {
    browser: true,
    es2020: true,
  },
  extends: ['standard', 'plugin:react/recommended'],
  parserOptions: {
    ecmaVersion: 11,
  },
  rules: {},
};

现代化项目主流框架虽然都已经集成了 eslint 的配置，但是如果我们自己开发框架的话还是需要了解以上这些内容才能很好的灵活使用

• eslint + Typescript

module.exports = {
  // 语法解释器
  parser: '@typescript-eslint/parser', // 配置Typescript 的语法解释器
  // ..
};

• Stylelint

$ yarn add stylelint -D
$ yarn add stylelint-config-standard -D
$ yarn stylelint [filePath] --fix
// 对sass文件的校验
$ yarn add stylelint-config-sass-guidelines -D

添加.stylelintrc.js 文件

modele.exports = {
  extends: ['stylelint-config-standard', 'stylelint-config-sass-guidelines'],
};

关于 stylelint，可以举一反三，参考 eslint 的使用

• Prettier

对各种类型的文件进行代码格式化

yarn add prettier -D
yarn prettier [filePath] --write

• git hooks 的工作机制

一些 git 命令执行的前后都可以去挂载一些额外的任务

我们的.git 文件中的 hooks 中存放了所有可以使用的钩子

通过 shell 脚本可以编写钩子任务触发时所要执行的具体操作

当我们执行挂载了任务的 git 操作时，对应的 shellJ 就会被执行

• ESLint 结合 Git Hooks

Husky 帮助我们不用编写 Shell 脚本也可以实现挂载任务

yarn add husky -D

// package.json
"scripts": {
  "lint": "eslint --ext .js,.vue,jsx,tsx,ts src/ --fix"
},
"husky":{
  "hooks": {
    "pre-commit": "yarn lint"
  }
}

在 git commint 执行前 yarn lint 检测代码之后，可能还需要后续处理一些其他的操作，我们可以借助 lint-staged 配合 husky 使用

// package.json
"scripts": {
  "lint": "eslint --ext .js,.vue,jsx,tsx,ts src/ --fix",
  "precommit": "lint-staged"
},
"husky":{
  "hooks": {
    "pre-commit": "yarn precommit"
  }
}
"lint-staged":{
  "*.js": [
    "eslint",
    "git add"
  ]
}