在初始化一个项目时，需要考虑到代码的风格、以及在 git commint 时，对代码检查，预防一些低级的错误，最终期待所有人的代码符合规范，统一风格。
涉及到 gitignore、eslint、eslintignore、lint-staged、pre-commit、babel、npmignore 等的相关配置，本文主要是对这些配置的相关说明和配置。
1 .gitignore
配置 git 需要忽略的文件。
例如：
# See https://help.github.com/ignore-files/ for more about ignoring files.
# dependencies
/node_modules
# testing
/coverage
# UMI generated files.
.umi
.umi-production
# production
/build
/dist
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
epidemic_system_fe.tar.gz
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# jetbrains
.idea
2 eslint
eslint 的作用主要是为了检查代码有没有错误，有没有不符合代码规范的地方。虽然 eslint 有 --fix 的选项，可以自动修复一些格式上的问题，但程度并不能和 Prettier 相当。
Prettier 的概念更像是无论你怎么写，走到我这里，都会被格式成我这一种样子。而 eslint 只在发现问题的地方进行 fix，这是两者在逻辑上有区别。
2.1 .eslintrc.js
先看一个 eslint 配置的例子，接下来再解释说明：
module.exports = {
parser: "babel-eslint",
extends: ["airbnb", "prettier"],
env: {
browser: true,
node: true,
es6: true,
mocha: true,
jest: true,
jasmine: true,
},
globals: {
IMAP: true,
},
rules: {
"generator-star-spacing": [0],
"consistent-return": [0],
"react/forbid-prop-types": [0],
"react/jsx-filename-extension": [1, { extensions: [".js", ".jsx"] }],
"global-require": [1],
"import/prefer-default-export": [0],
"react/jsx-no-bind": [0],
"react/prop-types": [0],
"react/no-array-index-key": [0],
"react/prefer-stateless-function": [0],
"react/jsx-wrap-multilines": [
"error",
{
declaration: "parens-new-line",
assignment: "parens-new-line",
return: "parens-new-line",
arrow: "parens-new-line",
condition: "parens-new-line",
logical: "parens-new-line",
prop: "ignore",
},
],
"no-console": ["error"],
"no-else-return": [0],
"no-param-reassign": ["warn", { props: true, "ignorePropertyModificationsFor": [] }],
"no-restricted-syntax": [0],
"no-underscore-dangle": 0,
"import/no-extraneous-dependencies": [0],
"no-use-before-define": [0],
"jsx-a11y/no-static-element-interactions": [0],
"jsx-a11y/no-noninteractive-element-interactions": [0],
"jsx-a11y/click-events-have-key-events": [0],
"jsx-a11y/anchor-is-valid": [0],
"jsx-a11y/media-has-caption": [0], // 移除 media必须包含track的限制
"no-nested-ternary": [0],
"arrow-body-style": [0],
"import/extensions": [0],
"no-bitwise": [0],
"no-cond-assign": [0],
"import/no-unresolved": [0],
"comma-dangle": [
"error",
{
arrays: "always-multiline",
objects: "always-multiline",
imports: "always-multiline",
exports: "always-multiline",
functions: "ignore",
},
],
"object-curly-newline": [0],
"function-paren-newline": [0],
"no-restricted-globals": [0],
"require-yield": [1],
/* 【严格】字符串模板中变量周围不能有空格 */
"template-curly-spacing": [2],
/* 【忽略】parseInt需要显示指定进制 */
"radix": [0],
},
parserOptions: {
ecmaFeatures: {
experimentalObjectRestSpread: true,
},
},
settings: {
polyfills: ["fetch", "promises"],
},
};
eslint 配置相关说明：
parser：eslint 默认使用Espree作为其解析器，但它并不能很好的适应 React 环境，所以使用 babel-eslint 用来代替默认的解析器；
extends：继承相关的配置规则；
env：指定代码的运行环境。不同的运行环境，全局变量不一样，指明运行环境这样 eslint 就能识别特定的全局变量，例如在 browser 环境，会自动识别全局变量 window，而在 node 环境会报错 。同时也会开启对应环境的语法支持，例如：es6；
globals：配置全局变量；
rules：配置对应的规则，这里的配置的规则，会覆盖 extends 相关的规则；你可以使用注释或配置文件修改你项目中要使用的规则。要改变一个规则设置，你必须将规则 ID 设置为下列值之一：
"off" 或 0 --- 关闭规则
"warn" 或 1 --- 开启规则，使用警告级别的错误：warn (不会导致程序退出)
"error" 或 2 --- 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
- parserOptions：javascript 语言选项
"parserOptions": {
// 语法版本 3、5（默认）、6、7、8
"ecmaVersion": 6,
// ecmaFeatures - 这是个对象，表示你想使用的额外的语言特性
// globalReturn - 允许在全局作用域下使用 return 语句
// impliedStrict - 启用全局 strict mode (如果 ecmaVersion 是 5 或更高)
// jsx - 启用 JSX
// experimentalObjectRestSpread - 启用对实验性的 object rest / spread properties 的支持，
// (重要：这是一个实验性的功能,在未来可能会改变明显。 建议你写的规则不要依赖该功能，除非当它发生改变时你愿意承担维护成本。)
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": false
},
// 设置为 "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)
"sourceType": "module"
},
2.2 .eslintignore
配置 eslint 校验需要忽略的文件。
例如：
build/*
config/*
docs/*
node_modules/*
public/*
scripts/*
mock/*
package.json
umi
.umi-production
src/utils/tools/ramda.js
3 .editorconfig
帮助维护跨多个编辑器和 IDE 从事同一项目的多个开发人员的一致编码风格。
例如：
root = true
[*]
end_of_line = lf
insert_final_newline = true
4 lint-staged、pre-commit
在 git commit 之时，重新格式化代码，同时进行代码检查预防一些低级错误。最终期待项目中的开发人员提交到线上的代码符合代码规范、风格统一，看起来像是一个人写的。
实现过程思路
-> 待提交的代码
-> git add 添加到暂存区
-> 执行 git commit
-> pre-commit 的钩子调起 lint-staged
-> lint-staged 取得所有被提交的文件依次执行写好的任务（ESLint 和 Prettier）
-> 如果有错误（没通过 ESlint 检查）则停止任务，等待下次 commit，同时打印错误信息
-> 成功提交
package.json 配置如下：
{
"name": "system_fe",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"eslint": "eslint --ext .js --ext .jsx ./src",
"lint-staged": "lint-staged",
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-eslint": "^10.0.1",
"cross-env": "^5.2.0",
"eslint": "^5.12.1",
"eslint-config-airbnb": "^17.1.0",
"eslint-config-prettier": "^3.5.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.12.4",
"lint-staged": "^8.1.0",
"pre-commit": "^1.2.2",
},
"dependencies": {},
"prettier": {
"trailingComma": true
},
"lint-staged": {
"*.{js,jsx}": [
"eslint --fix",
"git add"
]
},
"pre-commit": [
"lint-staged"
]
}
5 babel
根据官网文档：
1：安装如下包：
npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill
2：在项目的根目录新增 babel.config.json 配置文件
{
"presets": [
[
"@babel/env",
{
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1",
},
"useBuiltIns": "usage",
}
]
]
}
3：可以在 package.json scripts 中配置打包转化命令
"scripts": {
"build": "babel src --out-dir lib",
},
在控制台直接运行：npm run build，就会把 src 目录下的文件通过 babel 转化输出到 lib 目录。
6 .npmignore
.npmignore 其实跟 .gitignore 一样，只是 .npmignore 是在发布 npm 包时，忽略要打包上传的文件；
例如，我们通过 babel 把 src 目录编译输出到 lib 目录，可以配置忽略 src；默认 node_modules 是会被直接忽略的。