通用项目开发环境配置推荐 - xw332/xw332.github.io GitHub Wiki
babel插件介绍
"@babel/runtime": "^7.9.2", // 定义在dependencies的运行环境，可以减少编译后的代码
"@babel/core": "^7.9.0" // babel核心
"@babel/plugin-proposal-class-properties": "^7.8.3", // 定义class时支持属性
"@babel/plugin-proposal-decorators": "^7.8.3", // 支持装饰器写法
"@babel/plugin-syntax-dynamic-import": "^7.8.3", // 动态加载import
"@babel/plugin-transform-runtime": "^7.8.3", // 支持polyfill按需加载
"@babel/preset-env": "^7.9.0", // 支持的最新es标准
"@babel/runtime-corejs3": "^7.9.2", // 最新的js原型编译类
"babel-eslint": "^10.1.0", // 配合eslint的插件
"babel-jest": "^25.2.4", // 配合jest的插件
"babel-plugin-transform-remove-console": "^6.9.4", // 编译时移除console的插件
babel-plugin-add-module-exports // 支持require的模块不需要加default
babel-plugin-external-helpers // 在包的顶部只引用一次 helpers，而不是每个模块都引用一遍
相关链接：
我的package配置
// package.json
{
// ...
"devDependencies": {
"@babel/core": "^7.7.7",
"@babel/plugin-syntax-dynamic-import": "^7.7.4",
"@babel/plugin-transform-runtime": "^7.7.6",
"@babel/preset-env": "^7.7.7",
"@babel/runtime-corejs3": "^7.7.7",
"babel-eslint": "^11.0.0-beta.2",
"babel-plugin-transform-remove-console": "^6.9.4",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.9.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-plugin-babel": "^5.3.0",
"eslint-plugin-import": "^2.19.1",
"eslint-plugin-prettier": "^3.1.2",
"prettier": "^1.19.1",
// ...
}
// ...
}
我的eslintrc配置-react
// .eslintrc.js
// http://eslint.org/docs/user-guide/configuring
// https://cloud.tencent.com/developer/chapter/12618
module.exports = {
root: true,
extends: [
'eslint:recommended',
'plugin:import/errors',
'plugin:import/warnings',
"plugin:jsx-a11y/recommended",
'plugin:prettier/recommended',
'prettier/flowtype',
'prettier/react',
'prettier/standard',
],
plugins: ['babel'],
parser: 'babel-eslint',
parserOptions: {
sourceType: 'module',
},
env: {
es6: true,
commonjs: true,
browser: true,
jest: true,
},
// 2error，1warn，0ok
rules: {
// indent: [1, 2], // 间隔空格，自动处理
quotes: [1, 'single'], // 单引号，自动处理
semi: 0, // 分号，自动处理
'space-infix-ops': 1, // 赋值等号两边的空格，自动处理
'no-else-return': 0, // return之后加else，自动处理
'no-lonely-if': 0, // else内嵌if，自动处理
'lines-between-class-members': 1, // 成员函数空行间隔，自动处理
'arrow-body-style': 1, // 支持单行的箭头函数，自动处理
'prefer-destructuring': 1, // 使用解构赋值，自动处理
'prefer-template': 1, // 使用字符串模版代替拼接，自动处理
'spaced-comment': 1, // 评论加空格，自动处理
'generator-star-spacing': 1, // 生成器的*空格，自动处理
'max-len': [1, { code: 120, ignoreUrls: true, ignoreComments: true }], // 单行最多内容，调试警告
'no-unused-vars': 1, // 定义但未使用的变量，调试警告
'no-unreachable': 1, // 存在未执行代码，调试警告
'no-shadow': 1, // 重复声明变量，调试警告
'no-nested-ternary': 1, // 嵌套三元表达式，调试警告
'consistent-return': 1, // 函数所有分支都有一致return，调试警告
'class-methods-use-this': 1, // 成员函数必须使用this，调试警告
'max-classes-per-file': [1, 3], // 一个文件内的class数量，调试警告
camelcase: 1, // 变量驼峰，调试警告
'jsx-quotes': 2, // html的属性使用双引号，自动处理
'react/jsx-indent': [2, 2], // 间隔空格，自动处理
'react/jsx-indent-props': [2, 2], // 间隔空格，自动处理
'react/jsx-one-expression-per-line': 1, // 每个表达式独立一行，自动处理
'react/jsx-props-no-spreading': 0, // 标签属性的空格，自动处理
'react/jsx-wrap-multilines': 1, // 将多行 JSX 标签写在括号里，自动处理
'react/jsx-tag-spacing': 0, // 单标签的结束空格，自动处理
'react/jsx-filename-extension': 0, // 文件扩展名，react-native 0.49 及以后版本已经不建议使用 .jsx 为后缀，调试警告
'react/jsx-boolean-value': 0, // 标签属性的变量格式
'react/no-unused-state': 1, // 没有使用的state
'react/sort-comp': 0, // 函数名顺序
'react/no-typos': 0, // 禁用拼写错误
'react/prop-types': 0, // 不强制要求写propTypes
'react/no-array-index-key': 1, // 阻止使用Array的序号作为props的key，调试警告
'react/destructuring-assignment': 0, // 属性必须解构后使用
'react/default-props-match-prop-types': 0, // 禁止组件上无关的默认属性
},
};
我的prettierrc配置
// .prettierrc
{
"trailingComma": "es5",
"semi": true,
"singleQuote": true,
"tabWidth": 2
}
我的babelrc配置
// .babelrc
{
"presets": [
[
"@babel/preset-env",
{
"modules": false, // 避免babel先于webpack或rollup转换js
"useBuiltIns": false // 是否打包所有相关依赖
}
]
],
"env": {
"production": {
"plugins": [
"transform-remove-console" // 生产环境，移除console
]
}
},
"plugins": [
["@babel/plugin-syntax-dynamic-import"], // 使用import动态加载模块
["@babel/plugin-proposal-class-properties", { "loose": true }], // 支持class属性
[
"@babel/plugin-transform-runtime",
{
"helpers": false, // 在包的顶部只引用一次 helpers，而不是每个模块都引用一遍
"corejs": 3 // runtime版本
}
]
]
}