vscode vue解决跨域_VS Code书写vue项目配置 eslint+prettier 统一代码风格

前言

以前公司的vue项目只是我一个人在写，代码风格统一，但是后来随着团队增加，统一的代码风格就越来越重要。我的主力工具是sublime，ws辅助，vscode基本很少使用(就下载安装放在冷宫)，但是听说用来写vue项目还不错，就开启了一番折腾。当然工具么，没有谁好谁坏了~~ 不盲目站队，适合自己的就是最好的。

目标是：Eslint校验代码语法，prettier统一格式化代码，按下保存自动修复eslint错误，自动格式化代码(因为懒~)

安装vscode插件

首先，需要安装 Vetur、ESLint、Prettier - Code formatter这三个插件，安装完重启下，防止插件不生效。

另外这里有个坑， Beautify插件会占用格式化代码的快捷键，因此会和prettier产生冲突，所以直接禁用掉。

vscode插件配置

打开vscode工具的设置(快捷键 Ctrl + ,)里面有两个设置。

一个是 USER SETTINGS(用户设置)也就是全局配置，其他项目也会应用这个配置。

另一个是WORKSPACE SETTINGS(工作区设置)也就是项目配置，会在当前项目的根路径里创建一个.vscode/settings.json文件，然后配置只在当前项目生效。

我把配置写在了工作区设置，配置如下：1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27{

//.vue文件template格式化支持，并使用js-beautify-html插件

"vetur.format.defaultFormatter.html": "js-beautify-html",

//js-beautify-html格式化配置，属性强制换行

"vetur.format.defaultFormatterOptions": {

"js-beautify-html": {

"wrap_attributes": "force-aligned"

}

},

//根据文件后缀名定义vue文件类型

"files.associations": {

"*.vue": "vue"

},

//配置 ESLint 检查的文件类型

"eslint.validate": [

"javascript",

"javascriptreact",

{

"language": "vue",

"autoFix": true

}

],

//保存时eslint自动修复错误

"eslint.autoFixOnSave": true,

//保存自动格式化

"editor.formatOnSave": true

}

ESLint 和 Prettier 的冲突修复

由于需要同时使用prettier和eslint，而prettier的一些规则和eslint的一些规则可能存在冲突，例如prettier字符串默认是用双引号而esLint定义的是单引号的话这样格式化之后就不符合ESLint规则了。

所以要解决冲突就需要在Prettier的规则配置里也配置上和ESLint一样的规则，直接覆盖掉，ESLint和Prettier的配置文件内容如下：

.eslintrc.js

配置使用单引号、结尾不能有分号。1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18module.exports = {

root: true,

env: {

node: true

},

extends: ['plugin:vue/essential', 'eslint:recommended'],

rules: {

'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',

'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',

//强制使用单引号

quotes: ['error', 'single'],

//强制不使用分号结尾

semi: ['error', 'never']

},

parserOptions: {

parser: 'babel-eslint'

}

}

.prettierrc

配置使用单引号、结尾不能有分号。1

2

3

4

5

6

7

8{

//开启 eslint 支持

"eslintIntegration": true,

//使用单引号

"singleQuote": true,

//结尾不加分号

"semi": false

}

也可以直接在vscode工作区配置prettier1

2

3

4

5

6

7

8{

//开启 eslint 支持

"prettier.eslintIntegration": true,

//使用单引号

"prettier.singleQuote": true,

//结尾不加分号

"prettier.semi": false,

}

效果预览

最后

这下再也不用看到别人代码一团糟吐槽了。第一次折腾vscode，参考了很多网上大佬的文章，但是感觉这个配置好像还差了哪里，但又始终不知道问题在哪里，热烈欢迎大家交流指教。