vscode代码自动格式化不结束问题(vscode格式化自动换行)

vue VSCode 开发设置(html自动补全、eslint保存时格式化、vetur 格式化html)

File - Preference - Setting -搜索setting.json - Edit in settings.json

settings.json

方法1:File - Preference - Setting -搜索setting.json - Edit in settings.json

settings.json

Setting.json

方法2:File - Preference - 搜索框输入:files.autoSave

之后能看到 files.autoSave 的可选项有

off : 关闭自动保存(默认)

afterDelay: 延迟xx时间后保存,可在 "files.autoSaveDelay" 中配置延迟时间;

onFocusChange: 编辑器失去焦点时自动保存;

onWindowChange: 窗口失去焦点时(编辑器窗口的切换,桌面窗口的切换)自动保存;

安装 ESLint

vscode 中安装 ESLint 插件

然后配置 vscode 的 setting.json

File - Preference - User Snippers

vue.json文件,然后添加下面模板

然后新建.vue文件 ,写下vue然后Tap键就能生成什么的模板。

如果没有生成模板只是多了个空格或者生成的是vue标签的话,我们还得设置一下,打开settings.json,添加下面的设置

如果你的Setting.json文件有 "files.associations" 设置的话,请删除,因为他会和上面 emmet.syntaxProfiles 冲突。

files.associations 和 emmet.syntaxProfiles 都是设置html 标签的补全,如果是要用.vue模板补全功能的话,html标签补全我们就用 emmet.syntaxProfiles 来设置。

vue 的开发中 vscode 可装用于开发规范的插件有

Prettier :规范js

ESLint: 规范js

Vuter: 规范 .vue 文件中 template

stylus: 规范 stylus

注意:以下配置是基于接下来介绍的插件设置的,如果没有安装插件是不会生效的。

或者:

其中:

4.如果使用了stylus,那么vscode安装stylus插件,进行设置,不适用冒号双引号大括号

根目录下创建eslint规则文件 .eslintrc.js

(下面browsers 多了s 正确的为 browser )

vscode img标签自动闭合问题

vscode 配置了eslint ctrl+s 自动格式化后,遇到img标签自动去除/ 问题,去除了/留下一个空格导致报错。

查了一下原因是因为 HTML(5) 不要求标签自闭合 ,而eslint默认开起了这个检测,可以在.eslint.js中的rules中添加 'vue/html-self-closing': 'off', 去关闭这条规则。

如果想使用这个规则,具体怎么解决那个空格问题暂时没去研究。

贴上我的vscode编辑器setting.json详细配置

vscode格式化问题

1)文件 — 首选项

因为 VsCode 默认启用了根据文件类型自动设置tabsize的选项,在设置中添加:

"editor.detectIndentation": false

2)编辑器配置

在项目文件中新建 .editorconfig 文件

为特定类型文件指定缩进大小、缩进类型(空格,或tab),是否自动插入末行等等。

vscode代码自动代码格式化(添加分号)

If you are using yarn or pnpm instead of npm set the setting eslint.packageManager to either yarn or pnpm

Alternatively you can disable ESLint for the workspace folder front-basic-knowledge by executing the 'Disable ESLint' command.

[Info - 4:48:07 PM]

Failed to load the ESLint library for the document /Users/wangshihao/Desktop/github/front-basic-knowledge/jsbasic/async/shark/8.10async2.js

To use ESLint please install eslint by running npm install eslint in the workspace folder front-basic-knowledge

or globally using 'npm install -g eslint'. You need to reopen the workspace after installing eslint.

If you are using yarn or pnpm instead of npm set the setting eslint.packageManager to either yarn or pnpm

Alternatively you can disable ESLint for the workspace folder front-basic-knowledge by executing the 'Disable ESLint' command.

file - Preferences - setting ,设置默认的Formatter

361知讯网

本文链接:http://pdidw.com/vs/49452.html

发表评论

评论列表

还没有评论,快来说点什么吧~