在理论开发中难免会有协同开发的时候，每个开发编写代码的格调、提交代码备注信息等方面的格调不尽一致，因而当时对立格调变得尤为重要。本文将在我的项目中集成eslint、stylelint、commitlint帮忙校验JS脚本代码标准、CSS脚本标准以及commit msg标准。

筹备示例工程

应用create-react-app脚手架搭建示例工程，工程反对typescript

create-react-app react-lint --template typescript

eslint

在终端执行上面命令

npx eslint --init

执行后，终端会呈现人机交互，依照本人需要勾选选项即可

最初会提醒须要装置以下这些插件

eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest eslint-config-standard@latest eslint@^7.12.1 eslint-plugin-import@^2.22.1 eslint-plugin-node@^11.1.0 eslint-plugin-promise@^4.2.1 @typescript-eslint/parser@latest

解释以下这些插件的作用：

  • eslint-plugin-react：请留神，反对 JSX 语法并不等同于反对 React。React 对 ESLint 无奈辨认的JSX语法利用特定的语义。如果你正在应用 React 并且想要 React 语义反对，咱们倡议你应用 eslint-plugin-react
  • @typescript-eslint/parser：ESLint 默认应用Espree作为其解析器，@typescript-eslint/parser解析器将 TypeScript 转换成与 estree 兼容的模式，以便在ESLint中应用。
  • eslint-config-standard：是一个比拟风行的脚本格调插件，外面提供了很多代码格调规定。
  • @typescript-eslint/eslint-plugin：为TypeScript代码库提供lint规定。
  • eslint-plugin-import：该插件旨在反对ES2015 +（ES6 +）导入/导出语法的查看，并避免文件门路和导入名称拼写错误的问题。
  • eslint-plugin-node：针对node语法的查看。
  • eslint-plugin-promise：针对Promise语法的测验。

  • 执行完npx eslint --init后会在根目录生成.eslintrc配置文件

    module.exports = {env: {  browser: true,  es2021: true},extends: [  'plugin:react/recommended',  'standard'],parser: '@typescript-eslint/parser', // 将 TypeScript 转换成与 estree 兼容的模式，以便在ESLint中应用parserOptions: {  ecmaFeatures: {    jsx: true // 启用 JSX  },  ecmaVersion: 12, // 指定你想要应用的 ECMAScript 版本  sourceType: 'module'},plugins: [  'react', // eslint-plugin-react的缩写，使ESLint反对 React 语义  '@typescript-eslint' // @typescript-eslint/eslint-plugin的缩写，为TypeScript代码库提供lint规定],rules: {  semi: [2, 'always'],  'no-use-before-define': 'off' // 'React' was used before it was defined}};

    stylelint

commitlint