RL-Notes

Appearance

On this page

vite (lint） ​

ESLint ​

bash
pnpm create @eslint/config

图片.png

1. parser - 解析器 ​

解析ts

2. parserOptions - 解析器选项 ​

解析器配置
ecmaVersion：语法版本
sourceType：模块
ecmaFeatures： 为一个对象，表示想使用的额外语言特性，如开启 `jsx`

3. rules - 具体代码规则 ​

4. plugins ​

拓展语法规则（但未启用,可以通过rules开启）

5.extends - 继承配置 ​

可自动开启plugins（相较与上）

图片.png

6. env 和 globals ​

运行环境和全局变量

Prettier ​

pnpm i prettier -D

.prettierrc.js

// .prettierrc.js
module.exports = {
  printWidth: 80, //一行的字符数，如果超过会进行换行，默认为80
  tabWidth: 2, // 一个 tab 代表几个空格数，默认为 2 个
  useTabs: false, //是否使用 tab 进行缩进，默认为false，表示用空格进行缩减
  singleQuote: true, // 字符串是否使用单引号，默认为 false，使用双引号
  semi: true, // 行尾是否使用分号，默认为true
  trailingComma: "none", // 是否使用尾逗号
  bracketSpacing: true // 对象大括号直接是否有空格，默认为 true，效果：{ a: 1 }
};
pnpm i eslint-config-prettier eslint-plugin-prettier -D
// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    // 1. 接入 prettier 的规则
    "prettier",
    "plugin:prettier/recommended"
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: "latest",
    sourceType: "module"
  },
  // 2. 加入 prettier 的 eslint 插件
  plugins: ["react", "@typescript-eslint", "prettier"],
  rules: {
    // 3. 注意要加上这一句，开启 prettier 自动修复的功能
    "prettier/prettier": "error",
    quotes: ["error", "single"],
    semi: ["error", "always"],
    "react/react-in-jsx-scope": "off"
  }
};

在 Vite 中接入 ESLint ​

pnpm i vite-plugin-eslint -D
// vite.config.ts
import viteEslint from 'vite-plugin-eslint';

// 具体配置
{
  plugins: [
    // 省略其它插件
    viteEslint(),
  ]
}

样式规范工具: Stylelint ​

pnpm i stylelint stylelint-prettier stylelint-config-prettier stylelint-config-recess-order stylelint-config-standard stylelint-config-standard-scss -D
// .stylelintrc.js
module.exports = {
  // 注册 stylelint 的 prettier 插件
  plugins: ['stylelint-prettier'],
  // 继承一系列规则集合
  extends: [
    // standard 规则集合
    'stylelint-config-standard',
    // standard 规则集合的 scss 版本
    'stylelint-config-standard-scss',
    // 样式属性顺序规则
    'stylelint-config-recess-order',
    // 接入 Prettier 规则
    'stylelint-config-prettier',
    'stylelint-prettier/recommended'
  ],
  // 配置 rules
  rules: {
    // 开启 Prettier 自动格式化功能
    'prettier/prettier': true
  }
};
{
  "scripts": {
    // 整合 lint 命令
    "lint": "npm run lint:script && npm run lint:style",
    // stylelint 命令
    "lint:style": "stylelint --fix "src/**/*.{css,scss}""
  }
}

在 Vite 中接入 Stylelint ​

# Vite 2.x
pnpm i @amatlash/vite-plugin-stylelint -D

# Vite 3.x 及以后的版本
pnpm i vite-plugin-stylelint -D
import viteStylelint from '@amatlash/vite-plugin-stylelint';
// 注意: Vite 3.x 以及以后的版本需要引入 vite-plugin-stylelint

// 具体配置
{
  plugins: [
    // 省略其它插件
    viteStylelint({
      // 对某些文件排除检查
      exclude: /windicss|node_modules/
    }),
  ]
}

Git提交检查 ​

husky ​

pnpm i husky -D
{
  "scripts": {
    // 会在安装 npm 依赖后自动执行
    "prepare": "husky install"
  }
}
npx husky add .husky/pre-commit "npm run lint"

lint-staged ​

pnpm i -D lint-staged

然后在 package.json中添加如下的配置:

{
 "lint-staged": {
   "**/*.{js,jsx,tsx,ts}": [
     "npm run lint:script",
     "git add ."
   ],
   "**/*.{scss}": [
     "npm run lint:style",
     "git add ."
   ]
 }
}

图片.png

commitlint ​

pnpm i commitlint @commitlint/cli @commitlint/config-conventional -D
// .commitlintrc.js
module.exports = {
  extends: ["@commitlint/config-conventional"]
};

图片.png