vs code 配置 eslint、格式化

开发vue项目时，使用 eslint 作为代码检查和规范工具，vs code 默认的格式化工具不能识别 .vue 文件，所以不能进行格式化

所以，需要安装 vetur ，此工具除了能够格式化 vue 文件代码外，还具有代码高亮等功能

安装此工具后，在 .vue 文件中，使用 atl+shif+f 键，会使用 vetur 进行代码的格式化

但是格式化后的代码不符合 eslint 规范，如字符串使用双引号，而不是单引号，并且在每行的末尾添加了分号

解决方法不止一种，可以配合其他的格式化工具，或者设置eslint 规则来解决

我喜欢一种比较简单的

就是将 vetur 的格式化方式换成 vs code 默认的

在设置文件中，加入如下标红代码

 

之后再格式化时，就会使用 vs code 默认的格式化了，不会将单引号换成双引号，不会自动在每行末尾加入分号

 

如果之前已经写了一些代码，其中的双引号以及分号和其他一些内容，如果想换成符合 eslint 规范的，重新格式化是不行的，因为 vs code 的格式化工具，虽然不会将单引号转换成双引号，但也不会将双引号转换成单引号，也就是说，其是支持两种引号的。

但是可以使用 eslint 提供的一个工具，对项目中的所有代码进行格式话，如果你使用 vue/cli 创建的项目，则这个工具已经安装且配置好了

只需要运行 npm run lint 命令就会将项目中的文件做一次整体的检查，并且会自动做一些修改，如将双引号替换成单引号，去除默认的分号，以及添加一些必要的空格等

但也会有两个问题

1、工具会检查 src 目录下的所有文件，如我在 assets 目录中引入了字体文件，但是字体文件中的js代码中的代码不符合 eslint 规范，所以也被算作错误，解决办法是排除不想要检查的目录

具体作为是在项目根目录下新建 .eslintignore 文件，加入如下代码

src/assets

2、工具不能解决所有问题，有些问题，如变量声明但没有使用，没有使用权等符号等问题，还是需要手动解决的

 

总结：

• 在项目开发伊始，就配置好 vue 文件的格式化工具，并且编写代码时，遵循 eslint 的规范，可以避免很多问题

"vetur.format.defaultFormatter.js": "vscode-typescript"

• 如果开发了一些代码，并且没有遵循 eslint 规范，可以使用下面命令检查并修复一些语法问题

npm run lint

但是不能解决所有的问题，需要人工的去解决

• eslint 代码检查工具，默认会检查 src 目录下的所有文件，所以应该添加例外