Eslint-config-shinemo NPM

说明

目的

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

功能

支持 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',
};

2 years ago

2 years ago

2 years ago

2 years ago