vs code 配置 eslint、格式化

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

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

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

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

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

我喜欢一种比较简单的

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

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

 

vs code 配置 eslint、格式化_第1张图片

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

 

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

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

vs code 配置 eslint、格式化_第2张图片

只需要运行 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 目录下的所有文件,所以应该添加例外

你可能感兴趣的:(vs code 配置 eslint、格式化)