关于eslint:项目集成eslintstylelintcommitlint

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

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

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

在终端执行上面命令

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
}
};

筹备示例工程

eslint

stylelint

commitlint