vscode+CRA+TypeScript+eslint+prettier+stylelint+husky+lint-staged完整版配置

最近在做一个react项目，需要统一和规范代码风格，并且实现git管理，规范提交。所以基于CRA脚手架搭建项目整体框架，并自定义配置相关需求。

CRA

在目标文件夹下打开cmd，项目使用ts开发，输入：

npx create-react-app my-app --template typescript

安装成功会提示happy hacking，并且会产生相应文件夹。打开package.json文件可以看到已安装的依赖。
项目使用pnpm管理包，以下均使用pnpm。

eslint

CRA是默认安装eslint的，我们也可以像下面这样安装：

pnpm i -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks

可能需要先创建一个eslint：

pnpm create @eslint/config

然后初始化eslint配置

eslint --init

在经过一系列提示问答之后，就会在项目根目录生成.eslintrc.js文件，里面包含创建时的默认规则，随后我们可以在这个文件中配置一系列其他所需的规则。
![在这里插入图片描述](https://img-blog.csdnimg.cn/0f327881ba394f8e9ac7ca127dc21d0b.png

我们可以在里面添加设置react版本自动检测

settings: {
    react: {
      version: 'detect'
    }
  },

对于rules，我们直接复制粘贴以下代码：

   'prettier/prettier': 'off',
    quotes: ['error', 'single'],
    'react/react-in-jsx-scope': 'off',
    'react/prop-types': 'off',
    '@typescript-eslint/no-empty-function': 'error',
    '@typescript-eslint/no-empty-interface': 'error',
    '@typescript-eslint/no-explicit-any': 'error',
    '@typescript-eslint/no-inferrable-types': 'error',
    '@typescript-eslint/no-misused-new': 'error',
    '@typescript-eslint/no-unused-vars': 'error',
    '@typescript-eslint/no-unsafe-assignment': 'off',
    '@typescript-eslint/await-thenable': 'warn',
    '@typescript-eslint/no-floating-promises': 'warn',
    '@typescript-eslint/no-unnecessary-type-assertion': 'error',
    '@typescript-eslint/no-unsafe-argument': 'error',
    '@typescript-eslint/no-unsafe-call': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/member-delimiter-style': 'off',
    '@typescript-eslint/strict-boolean-expressions': 'off',
    '@typescript-eslint/no-misused-promises': 'off',
    '@typescript-eslint/space-before-function-paren': 'off',
    '@typescript-eslint/restrict-template-expressions': 'off',
    '@typescript-eslint/no-extraneous-class': 'off'

由于eslint会跟后面的prettier产生冲突，所以我们需要配置:

pnpm install eslint-config-prettier eslint-plugin-prettier --save-dev

并且在.eslintrc.js文件里添加以下配置：

extends: [
	...
    'prettier',
    'plugin:prettier/recommended'
    ...
  ]

我们使用es6模块化而不是commonJS，为了避免出现编译时发生转化，我们在.eslintrc.js添加：

{
...
ignorePatterns: [".eslintrc.js", "stylelint.config.js"],
...
}

typescript

如果我们的项目是一个工具库，那我们很可能需要ts-node帮我们方便的执行typescript脚本文件。在这里补充了一下，需要的人自取就可以了。

pnpm install ts-node -D

配置tsconfig.json

{
  // 编译选项
  "compilerOptions": {
    // 生成代码的语言版本
    "target": "esnext",
    // 指定要包含在编译中的 library
    "lib": ["dom", "dom.iterable", "esnext"],
    // 允许 ts 编译器编译 js 文件
    "allowJs": true,
    // 跳过声明文件的类型检查
    "skipLibCheck": true,
    // es 模块 互操作，屏蔽 ESModule 和 CommonJS 之间的差异
    "esModuleInterop": true,
    // 允许通过 import x from 'y' 即使模块没有显式指定 default 导出
    "allowSyntheticDefaultImports": true,
    // 开启严格模式
    "strict": true,
    // 对文件名称强制区分大小写
    "forceConsistentCasingInFileNames": true,
    // 为 switch 语句启用错误报告
    "noFallthroughCasesInSwitch": true,
    // 生成代码的模块化标准
    "module": "esnext",
    // 模块解析（查找）策略
    "moduleResolution": "node",
    // 允许导入扩展名为.json的模块
    "resolveJsonModule": true,
    // 是否将没有 import/export 的文件视为旧（全局而非模块化）脚本文件。
    "isolatedModules": true,
    // 编译时不生成任何文件（只进行类型检查）
    "noEmit": true,
    // 指定将 JSX 编译成什么形式
    "jsx": "react-jsx"
  },
  // 指定允许 ts 处理的目录
  "include": [
    "src",
    ".eslintrc.js"
  ]
}

prettier

安装：

pnpm install prettier --save-dev --save-exact

最外层文件夹下新增.prettierrc文件，配置一些常用属性：

module.exports = {
  printWidth: 120, //一行的字符数，如果超过会进行换行，默认为80
  tabWidth: 2, // 一个 tab 代表几个空格数，默认为 2 个
  useTabs: false, //是否使用 tab 进行缩进，默认为false，表示用空格进行缩减
  singleQuote: true, // 字符串是否使用单引号，默认为 false，使用双引号
  trailingComma: "none", // 是否使用尾逗号
  bracketSpacing: true, // 对象大括号直接是否有空格，默认为 true，效果：{ a: 1 }
};

stylelint

下载插件

安装

 pnpm add stylelint stylelint-config-standard -D

在根目录下生成stylelint.config.js配置文件，并根据如下初始化配置

module.exports = {
  // 注册 stylelint 的 prettier 插件
  plugins: ['stylelint-prettier'],
  // 继承一系列规则集合
  extends: [
    // standard 规则集合
    'stylelint-config-standard',
    // 样式属性顺序规则
    'stylelint-config-recess-order',
    // 接入 Prettier 规则
    'stylelint-config-prettier',
    'stylelint-prettier/recommended'
  ],
  // 配置 rules
  rules: {
    // 开启 Prettier 自动格式化功能
    'prettier/prettier': true
  }
};

commitlint

代码的提交规范和规范的校验神器，安装简单：

npm install -S @commitlint/config-conventional @commitlint/cli

创建.commitlintrc.js文件

module.exports = {
  extends: ['@commitlint/config-conventional']
};

husky

安装依赖

npm install husky --save-dev

启动 hooks, 生成 .husky 文件夹

npx husky install

在 package.json 中生成 prepare指令

npm set-script prepare "husky install"

执行 prepare 指令 npm run prepare

添加 commitlint 的 hook 到 husky 中，commit-msg 时进行校验:

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

此时，不符合规范的 commit 将不会被允许提交。

添加 commit 时的 hook，pre-commit 时运行 npx eslint --ext .js,.ts,.vue src

npx husky add .husky/pre-commit "npx eslint --ext .js,.ts,.vue src"

此时提交代码，如果项目中有错误，无法提交，想要提交代码，必须解决所有的错误信息。

lint-staged

可以让你当前的代码检查只检查本次修改更新的代码，并在出现错误的时候，自动修复并推送

pnpm install -D lint-staged

修改package.json文件：

"lint-staged": {
    "src/*.{js,jsx,mjs,ts,tsx}": [
      "node_modules/.bin/prettier --write",
      "node_modules/.bin/eslint --fix",
      "git add ."
    ],
    "src/*.{css,scss,less,json,html,md,markdown}": [
      "node_modules/.bin/prettier --write",
      "git add ."
    ]
  },

配置 .husky/pre-commit 文件

npx --no --lint-staged