现有业务项目中,开发人员使用的ide五花八门,既有Visual Studio Code、webstorm,也有idea、pycharm这种偏后端的ide;而且各自设置的code style也不一致,为了统一团队风格,减少后期代码维护量,决定进行整改。
如果你用的是vscode,可以参照这里进行配置,此篇不再赘述。
现有主流的前端格式化工具是prettier,在vscode和idea中都有相应的插件:
鉴于笔者常用的开发工具是JetBrains系列,下面以idea为例,教你三招搞定配置:
{
"scripts": {
"eslint": "eslint src --ext .js,.jsx,.vue",
"eslint:fix": "eslint src --ext .js,.jsx,.vue --fix"
},
"devDependencies": {
"eslint-config-prettier": "^8.5.0"
}
}
我们仅需要在本地及开发环境中配置prettier即可,所以加入该依赖到devDependencies,并且需要在scripts里加上"eslint:fix",让它作为eslint的一个插件,在保存代码时自动运行。
主要是在插件中添加plugin:
extends: ['plugin:vue/vue3-essential', 'eslint:recommended', 'plugin:prettier/recommended']
鉴于vue自带的规范检查可能跟eslint有冲突,可以全部修改为eslint的,参考配置文件如下:
module.exports = {
root: true,
env: {
browser: true,
node: true,
},
extends: ['plugin:vue/vue3-essential', 'eslint:recommended', 'plugin:prettier/recommended'],
parserOptions: {
parser: 'babel-eslint',
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
// WS003-前端开发规范-JavaScript-引用
'prefer-const': [
'warn',
{
destructuring: 'any',
ignoreReadBeforeAssign: false,
},
],
'no-const-assign': 'error',
'no-var': 'warn',
// WS003-前端开发规范-JavaScript-对象
'no-new-object': 'warn',
'object-shorthand': ['warn', 'always'],
'no-prototype-builtins': 'error',
'no-array-constructor': 'warn',
// WS003-前端开发规范-JavaScript-解构赋值
'prefer-destructuring': 'off',
// WS003-前端开发规范-JavaScript-字符串
'prefer-template': 'warn',
'no-eval': 'error',
'no-useless-escape': 'off',
"template-curly-spacing": "off",
// WS003-前端开发规范-JavaScript-函数
'no-new-func': 'error',
'space-before-function-paren': [
'error',
{
anonymous: 'always',
named: 'never',
asyncArrow: 'always',
},
],
'space-before-blocks': ['error', 'always'],
'func-style': 'off',
'wrap-iife': ['error', 'inside'],
'no-loop-func': 'error',
'no-param-reassign': 'error',
'prefer-spread': 'error',
// WS003-前端开发规范-JavaScript-箭头函数
'prefer-arrow-callback': 'error',
'arrow-spacing': 'error',
'arrow-body-style': [
'error',
'as-needed',
{ requireReturnForObjectLiteral: false },
],
// WS003-前端开发规范-JavaScript-类&构造函数
'no-useless-constructor': 'error',
'no-dupe-class-members': 'error',
// WS003-前端开发规范-JavaScript-模块
'no-duplicate-imports': 'error',
'no-iterator': 'error',
// WS003-前端开发规范-JavaScript-变量声明
'no-undef': 'error',
'no-unused-vars': 'error',
// WS003-前端开发规范-JavaScript-比较运算符&相等
eqeqeq: 'off',
},
};
以下配置仅供参考:
module.exports = {
printWidth: 80,
tabWidth: 2,
useTabs: false,
semi: false,
singleQuote: true,
quoteProps: 'as-needed',
jsxSingleQuote: false,
trailingComma: 'none',
bracketSpacing: true,
jsxBracketSameLine: true,
arrowParens: 'avoid',
endOfLine: 'auto',
};
打开settings,按图示修改一下eslint配置:
然后修改一下actions on save,确保只勾选图示两个框,避免idea自带格式化和eslint格式化冲突:
最后,按CTRL+k,打开commit code时的设置;
确保不要勾选下面三个按钮:
1、如果你用的是vscode,可以参照这里进行配置,此篇不再赘述。
2、如果你用的是JetBrains系列,可以参照上面的步骤。