说明

目的

• 为了统一团队内的代码风格和编码规范

功能

• 支持 js, react, vue 和 typescript 以及 react + typescript 的组合
• vue 暂时只支持 vue3
• 支持 css, less 文件的格式化
• 包含 husky + lint-staged 的配置说明

使用方法（编辑器以 vscode 为例）

安装 cnpm(为了提升三方依赖的安装速度)

npm install cnpm -g --registry=https://registry.npmmirror.com

编辑器配置

• vscode 中安装 Prettier 插件
• 增加如下的配置（用户），启用保存时【格式化】和【自动修复 eslint 问题】 能力

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue",
    "typescript",
    "typescriptreact"
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true
}

js

• 安装依赖

cnpm i eslint eslint-config-shinemo -D

• 项目根目录下，新建 .eslintrc.js 文件，增加如下内容

module.exports = {
  extends: ['shinemo'],
};

react

• 安装依赖

cnpm i eslint  @babel/core @babel/eslint-parser @babel/preset-react eslint-plugin-react eslint-config-shinemo -D

• 项目根目录下，新建 .eslintrc.js 文件，增加如下内容

module.exports = {
  extends: ['shinemo', 'shinemo/react'],
};

typescript

• 安装依赖

cnpm i eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-shinemo -D

• 项目根目录下，新建 .eslintrc.js 文件，增加如下内容

module.exports = {
  extends: ['shinemo', 'shinemo/typescript'],
};

react + typescript

• 安装依赖

cnpm i eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react -D

• 项目根目录下，新建 .eslintrc.js 文件，增加如下内容

module.exports = {
  extends: ['shinemo', 'shinemo/react', 'shinemo/typescript'],
};

vue

• 安装依赖

cnpm i eslint @babel/eslint-parser vue-eslint-parser eslint-plugin-vue eslint-config-shinemo -D

• 项目根目录下，新建 .eslintrc.js 文件，增加如下内容

module.exports = {
  extends: ['shinemo', 'shinemo/vue'],
};

husky + lint-staged

缘由

• 为了避免提交时绕过 eslint 检查
• 为了避免让每次 commit 前都把整个 src 都扫描并 fix 一次，速度太慢了

使用方式(以 husky 7.x 为例说明，特别注意 husky V4 和 v7 版本使用方式差异较大)

# 安装哈士奇
cnpm i husky -D
# 安装
cnpm i lint-staged -D
# 添加 prepare 命令 (需 npm 7.x+ 版本)
cnpm set-script prepare "husky install"
# prepare 创建 bash 脚本，安装 git hooks
cnpm run prepare
# 添加 pre-commit 的 git hook 脚本
npx husky add .husky/pre-commit "npx lint-staged"

配置 lint-staged

• 项目根目录下新增 .lintstagedrc.js 文件，增加如下配置

module.exports = {
  "**/*.{ts,tsx}": [
    () => "tsc -p tsconfig.json --noEmit",
    "eslint --cache --fix --color --quiet",
  ],
  "**/*.{js,jsx}": ["eslint --cache --fix --color --quiet"],
  "**/*.vue": ["eslint --cache --fix --color --quiet"],
  "**/*.{css,less}": ["stylelint --cache --fix --color --quiet"],
};

特别说明

• 底层依赖的是 eslint-config-alloy 提供的配置能力，它非常优秀

常见问题

• 看配置方式和 ** eslint-config-alloy ** 基本一样，为啥要重复造一个轮子（基本是对它的一个封装）？

  • 主要考虑到团队未来会有一些个性化的配置，方便统一修改

• 如果你对默认的 prettier 格式化的效果不太满意，可以参考如下的配置修改（不建议修改）

  • 项目根目录新建 .prettierrc.js 文件，内容可参考配置

  module.exports = {
  // 一行最多 120 字符
  printWidth: 120,
  // 使用 2 个空格缩进
  tabWidth: 2,
  // 不使用缩进符，而使用空格
  useTabs: false,
  // 行尾需要有分号
  semi: true,
  // 使用单引号
  singleQuote: true,
  // 对象的 key 仅在必要时用引号
  quoteProps: 'as-needed',
  // jsx 不使用单引号，而使用双引号
  jsxSingleQuote: false,
  // 末尾需要有逗号
  trailingComma: 'all',
  // 大括号内的首尾需要空格
  bracketSpacing: true,
  // jsx 标签的反尖括号需要换行
  bracketSameLine: false,
  // 箭头函数，只有一个参数的时候，也需要括号
  arrowParens: 'always',
  // 每个文件格式化的范围是文件的全部内容
  rangeStart: 0,
  rangeEnd: Infinity,
  // 不需要写文件开头的 @prettier
  requirePragma: false,
  // 不需要自动在文件开头插入 @prettier
  insertPragma: false,
  // 使用默认的折行标准
  proseWrap: 'preserve',
  // 根据显示样式决定 html 要不要折行
  htmlWhitespaceSensitivity: 'css',
  // vue 文件中的 script 和 style 内不用缩进
  vueIndentScriptAndStyle: false,
  // 换行符使用 lf
  endOfLine: 'lf',
  // 格式化内嵌代码
  embeddedLanguageFormatting: 'auto',
  };