关于eslint:项目集成eslintstylelintcommitlint

55次阅读

共计 1589 个字符,预计需要花费 4 分钟才能阅读完成。

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

正文完
 0