关于eslint:项目集成eslintstylelintcommitlint

在理论开发中难免会有协同开发的时候，每个开发编写代码的格调、提交代码备注信息等方面的格调不尽一致，因而当时对立格调变得尤为重要。本文将在我的项目中集成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