代码规范
eslint 配置
-
安装依赖
因为我这里的webstorm的版本为2021.1.3,为了后续编辑器添加eslint的检查,所以这里使用eslint@7版本
npm i eslint@7 -D
-
初始化
eslint
eslint --init
可以根据自己的需要进行选择。我这里是做一个命令号脚本,所以选择如下配置:
✔ How would you like to use ESLint? · problems ✔ What type of modules does your project use? · commonjs ✔ Which framework does your project use? · none ✔ Does your project use TypeScript? · No / Yes ✔ Where does your code run? · node ✔ What format do you want your config file to be in? · JavaScript
生成的
.eslintrc.js
格式化后是如下module.exports = { env: { commonjs: true, es2021: true, node: true }, extends: 'eslint:recommended', parserOptions: { ecmaVersion: 12 }, rules: { } }
-
添加
eslint
与babel
冲突的配置-
安装依赖
npm i @babel/eslint-parser -D
-
添加
eslint
解释器配置module.exports = { env: { commonjs: true, es2021: true, node: true }, extends: 'eslint:recommended', parserOptions: { + parser: '@babel/eslint-parser', ecmaVersion: 12 }, rules: { } }
小插曲:
-
修改完 babelrc 的时候,需要重启 webstorm, 或者右键重新应用
-
使用 babel.config.js 的时候 会报错
这里需要配置 requireConfigFile: false, 解释如下文:
github.com/babel/babel… (Additional parser configuration 部分)
-
-
-
编辑器添加eslint检查的配置
这里可以根据自己使用的编辑器自行
通过解决这个问题找到 babel 与 eslint 的冲突解决关系:
Question: 项目中出现JS Class 中使用static声明属性 ESLint 报错的问题
prettier 配置
-
添加prettier依赖
npm i prettier -D
-
添加 prettier 的配置
echo module.exports = {} > .prettierrc.js echo > .prettierignore
两个文件分别回填入如下:
.prettierrc.js // 具体可以根据自己需要配置
module.exports = { printWidth: 120, singleQuote: true, trailingComma: 'none', semi: false, tabWidth: 2, useTabs: false, bracketSpacing: true, jsxBracketSameLine: false, arrowParens: 'avoid', proseWrap: 'preserve', }
.prettierignore
# Ignore artifacts: build coverage node_module # Ignore all HTML files:
-
添加 prettier 与 eslint 冲突的配置
-
安装依赖:
npm i eslint-config-prettier eslint-plugin-prettier -D
-
.eslintrc.js
修改配置module.exports = { env: { commonjs: true, es2021: true, node: true }, // eslint-config-prettier 来关掉 (disable) 所有和 Prettier 冲突的 ESLint 的配置 - extends: 'eslint:recommended', + extends: ['eslint:recommended', 'prettier'], // 启用 eslint-plugin-prettier ,将 prettier 的 rules 以插件的形式加入到 ESLint 里面 + plugins: ['prettier'], parserOptions: { parser: '@babel/eslint-parser', ecmaVersion: 12 }, - rules: {} + rules: { + 'prettier/prettier': 2 // prettier 冲突提示这里可以具体配置 + } }
上述的配置可以简略为如下:
module.exports = { env: { commonjs: true, es2021: true, node: true }, - extends: 'eslint:recommended', + extends: ['eslint:recommended', 'plugin:prettier/recommended'], parserOptions: { parser: '@babel/eslint-parser', ecmaVersion: 12 }, rules: {} }
具体参阅:
具体配置参阅:
blog.csdn.net/weixin_4507…^v9^pc_search_result_cache,157^v4^control&utm_term=eslint+%2B+prettier&spm=1018.2226.3001.4187
-