问题背景

现有业务项目中，开发人员使用的ide五花八门，既有Visual Studio Code、webstorm，也有idea、pycharm这种偏后端的ide；而且各自设置的code style也不一致，为了统一团队风格，减少后期代码维护量，决定进行整改。

方案分析

如果你用的是vscode，可以参照这里进行配置，此篇不再赘述。

现有主流的前端格式化工具是prettier，在vscode和idea中都有相应的插件：

鉴于笔者常用的开发工具是JetBrains系列，下面以idea为例，教你三招搞定配置：

1、在package.json中增加prettier的依赖以及运行脚本

{"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的一个插件，在保存代码时自动运行。

2、修改.eslintrc.js，去除所有vue-cli自动生成的规范，自定义插件及规范

主要是在插件中添加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',},
};

3、添加.prettierrc.js，自定义prettier插件的配置

以下配置仅供参考：

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',
};

4、修改JetBrains系列配置，保存时自动格式化eslint

打开settings，按图示修改一下eslint配置：

然后修改一下actions on save，确保只勾选图示两个框，避免idea自带格式化和eslint格式化冲突：

最后，按CTRL+k，打开commit code时的设置;

确保不要勾选下面三个按钮：

最佳实践

1、如果你用的是vscode，可以参照这里进行配置，此篇不再赘述。

2、如果你用的是JetBrains系列，可以参照上面的步骤。

vue项目代码格式不统一怎么办？一招教你解决相关推荐

服务器上部署前端Vue项目代码
服务器上部署前端Vue项目代码本人自己感觉部署前端代码比部署后端难,主要是我在部署的过程中遇到了各种报错
vue项目Error: Cannot find module ‘xxx’类报错的解决方法
现发现只要是报错 Error: Cannot find module 'xxx'(例如 Error: Cannot find module 'webpack')这类的问题都可以用下面的方法解决. 报错 ...
ESLint+Prettier+Vetur 统一Vue项目代码风格
前言一.为什么要整合Eslint和Prettier? 1.对比Prettier和Linters(eslint/tslint/stylelint) Linters有两类规则: 格式化规则:如最大长度, ...
vue关闭代码格式校验
eslint eslint是一个JavaScript的校验插件通常用来校验语法或代码的书写风格有了eslint的检查代码中的缩进空格空白行之类的都会被按照规范检查但有时我们不希望开启代码校 ...
将Vue项目代码打包成桌面应用
参考 electron 官网第一步: 安装Vue脚手架Vue CLI只能用最新版,建议在用官网最新命令行 npm install -g @vue/cli 第二步: 创建vue项目 vue creat ...
vue项目访问服务器时：WebSocket connection to ‘wss://XXXX/‘的解决方法
关于WebSocke的介绍:新手入门:websocket 简单来说,WebSocket 为web应用程序客户端和服务端之间(客户端服务端)提供了一种全双工通信机制,报错是因为发送报文的过程出现问题. ...
vue项目关闭eslint检查，vue关闭代码格式校验
本人录制的视频Vue全套学习学习视频:B站小胖梅-的个人空间_哔哩哔哩_Bilibili eslint是一个JavaScript的校验插件,通常用来校验语法或代码的书写风格. 关闭eslint检查 ...
vue项目 - svg格式的icon图标无法显示颜色
前言在项目中遇到svg格式的icon图标无法显示颜色,这个问题.尝试过很多方法,最后发现不是代码的问题,而是iconfont图标库中没有配置好. 1. 发现问题如下当点击菜单选项时,icon和文字 ...
Vue项目代码改进（三）—— Cookie、LocalStorage和SessionStorage的使用
存在问题: 如果在退出页面时,没有点击"退出"按钮,而是直接关闭页面,token并没有被清除,依然能通过访问http://localhost:8080/#/ 直接进入主页. 原因: ...

vue项目代码格式不统一怎么办？一招教你解决

vue项目代码风格统一