VSCode,Vue,ESLint的缩进问题

使用

vue init webpack kk_demo

创建一个vue项目的时候,配置如下:


VSCode,Vue,ESLint的缩进问题_第1张图片
image.png

用VSCode打开后(红色框中的文件夹是我后来创建的先忽略):


VSCode,Vue,ESLint的缩进问题_第2张图片
image.png

打开src目录相关的js/vue文件,默认的是2个空格的缩进,对于习惯写其他的语言的我来说,需要改成4个空格的缩进。
1.修改.eslint.js

在rules:中添加

'indent' : 'off'

2.修改.editorconfig
把 indent_size = 2 更改为 indent_size = 4
3.打开prefrence->settings 在右侧添加如下:
"editor.detectIndentation": false,
4.下载vue-beautify插件
5.选中某个需要格式化的文件,在文件里右键选择 Beautify vue
就会从:


VSCode,Vue,ESLint的缩进问题_第3张图片
image.png

变成:


VSCode,Vue,ESLint的缩进问题_第4张图片
image.png

你可能感兴趣的:(VSCode,Vue,ESLint的缩进问题)