.babelrc Babel 配置文件
{
"presets": [ // babel初始化设置
"@babel/preset-env", // 让babel根据环境自动转换ES6+语法
"@babel/preset-react" // 让babel支持react语法
],
"plugins": [ // 插件
"@babel/plugin-transform-runtime", // babel运行时垫片库
"@babel/plugin-proposal-object-rest-spread", // 支持对象的扩展运算符
"@babel/plugin-syntax-dynamic-import", // 支持异步import语法
["@babel/plugin-proposal-decorators", { "legacy": true }], // 支持“修饰器”语法
"@babel/plugin-proposal-class-properties", // 支持编译class类中直接定义箭头函数语法
"@babel/plugin-proposal-optional-chaining", // 支持“可选链”语法: a.b?.c, 相当于: a.b ? a.b.c : undefined
"@babel/plugin-proposal-nullish-coalescing-operator", // 支持“双问号”语法:a ?? b, 相当于: a ? a : b;
"react-loadable/babel", // 代码分割插件raect-loadable配置,服务端渲染时有关,暂时没用
[
"import", // babel-plugin-import按需加载插件
{
"libraryName": "antd", // 需要按需加载的包的名字
"style": true // true - 加载antd的less样式文件, 'css' - 加载antd的css样式文件
}
]
]
}
eslintrc.json Eslint 代码规范检查器配置文件
{
"env": { // 需要启用的全局变量(即哪些变量名被eslint默认存在而不用显式声明)
"browser": true, // 浏览器中的全局对象,主要是window
"commonjs": true, // commonjs规范中的全局对象
"es6": true, // ES6+中的全局对象
"mocha": true, // MoCha库的全局对象
},
"parser": "babel-eslint", // 解析器(官方推荐),就用这个不然有些babel支持的新语法Eslint无法识别
"parserOptions": { // 其他初始化设置
"ecmaVersion": 9, // 识别到哪个ES版本的语法
"ecmaFeatures": { // 额外的语言特性
"impliedStrict": true, // 启用严格模式
"jsx": true // 启用对JSX的支持
},
"allowImportExportEverywhere": true, // 允许在任何地方使用import和export
"sourceType": "module" // 代码类型:项目中是用ES6模块import/export来构建的,所以这里设置module
},
"plugins": [ // 插件
"react", // eslint-plugin-react插件,支持react语法
"react-hooks", // 支持hooks语法
"prettier" // prettier语法规范
],
"rules": { // 自定义的检测规范配置
"semi": "warn", // 末尾必须加分号,否则警告
"no-unused-vars": "off", // 不允许出现未使用过的变量,关闭
"no-cond-assign": "error", // 禁止条件表达式中出现赋值操作符,否则报错
"no-debugger": "error", // 禁用debugger语句,否则报错
"no-dupe-args": "error", // 禁止 function 定义中出现重名参数,否则报错
"no-caller": "error", // 禁用 arguments.caller 和 arguments.callee
"no-unmodified-loop-condition": "error", // 禁止死循环(循环条件不变)
"no-with": "error", // 禁用with语句
"no-catch-shadow": "error", // 禁止 catch 子句的参数与外层作用域中的变量同名
"react/no-unescaped-entities": "off", // 禁止未知的属性出现在JSX的标签上,关闭
"react-hooks/rules-of-hooks": "error", // hooks语法必须正确,否则报错
"prettier/prettier": "warn" // 一切与prettier规范不合的均警告
}
}
.prettierrc prettier 代码规范性配置
{
"singleQuote": true, // 是否使用单引号代替双引号 (字符串使用单引号,属性值使用双引号)
"endOfLine": "auto", // 忽略 prettier 检测文件每行结束的格式
"arrowParens": "always", // 箭头函数圆括号必须保留
}