VSCode-代码格式化

魏君博
2023-12-01

一、vetur

1. 介绍

VSCode下强大的vue工具,支持vue语法的高亮(完整的支持高亮的语法如下图)、代码片段、emmet(代码速写,VSCode本身自带有tab键对html5的代码进行快速开发,但是需要在settings.json文件中配置)、错误检测、格式化等,具体的使用可以参考官方文档

vetur官方文档


2. 使用

1) emmet在vue中使用的配置

"emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html"
}复制代码

2)错误检测

vetur默认使用eslint-plugin-vue@beta来检测template,如果不想使用linting,可以在settings.json中关闭


修改此值为false即可

3)格式化

vetur推荐使用两个空格来规定editor.tabSize和editor.insertSpace,

对于html、css、less、scss、js格式使用js-beautify来规范,这个不需要再进行安装

js-beautify的github仓库

3. 使用要点

需要在VSCode中安装vetur插件,其他都不需要安装

要点一: 保存文件的时候自动格式化的方法:

settings.json文件中添加:

"editor.formatOnSave": true复制代码

要点二: 保存文件的时候自动格式化的问题的解决:

但是这样格式化有一个问题,就会所有的js语句会自动带上分号和双引号

原因就是因为vetur默认使用的有很多是prettier插件,如下图


prettier在VSCode中的插件- prettier 安装成功后VSCode默认的格式化就会被prettier代替,默认的快捷键是Ctrl + shift + F 。详细配置查看官方文档(此处仅供学习,我们的基础配置中暂无需安装)

prettier官方文档

基本prettier配置文档

prettier只关注格式化,它没有检查代码语法的能力,所以经常会遇到搭配各种lint检查的时候出现各种冲突。

下面是解决保存时自动格式化出现添加双引号和分号的方法:

解决方式1:

在settings.json文件中添加:

 "vetur.format.defaultFormatter.js": "prettier"复制代码

改为 

"vetur.format.defaultFormatter.js": "vscode-typescript"复制代码

这种解决方式就用不了prettier这个插件了

解决方式2:(现在使用这种解决方式)

-- 在settings.json文件中新增

// 去除自动格式化时js加的分号与双引号
"vetur.format.defaultFormatterOptions": {
    "prettier": {
        "semi": false,
        "singleQuote": true
    }
}复制代码

解决方式3:

VSCode局部安装prettier插件

npm install --save-dev --save-exact prettier复制代码

--或者是全局安装

npm install --global prettier复制代码

如果安装npm包 需要进行以下操作:

--1. 新建.prettierrc.json配置文件在项目根目录下

-- 2 . prettierrc.json文件的配置如下

{
    "singleQuote": true,
    "semi": false
}复制代码

要点三: template内的标签格式化:

vetur默认不会对template内进行格式化,改进方法

在settings.json文件中添加:

// 對template代碼格式化
"vetur.format.defaultFormatter.html": "js-beautify-html"复制代码

要点四: tab的空格数:

默认编辑器的tab空格是4个 改成2个

在settings.json文件中添加:

"editor.tabSize": 2,复制代码

二、其他配置

推荐安装的插件:

1. vscode-icons

是给VSCode下项目的文件加上图标,以区别文件,在settings.json中增加:

// 文件图标主题插件 安装vscode-icons后的配置
"workbench.iconTheme": "vscode-icons",复制代码

如下图所示:


2. vscode-fileheader

是给文件开始添加注释的插件。安装完毕之后在settings.json中添加配置:

"fileheader.Author": "zhangsan",  
"fileheader.LastModifiedBy": "zhangsan",复制代码

F1或者Alt+Cmd+P然后输入fileheader回车即可添加

添加完如下


其他插件推荐 segmentfault.com/a/119000001…

三、完整settings.json配置文档

{   
    // 文件图标主题插件 安装vscode-icons后的配置
    "workbench.iconTheme": "vscode-icons",
    // 安装vscode-fileheader 给文件开头添加多行注释的配置 (F1或Alt+CMD+P后输入fileheader回车即可添加)
    "fileheader.Author": "zhangsan",
    "fileheader.LastModifiedBy": "zhangsan",
    // 工作区主题色,自行安装自己喜欢的
    "workbench.colorTheme": "One Dark Pro",
    // 控制是否在打开文件时,基于文件内容自动检测 `editor.tabSize#` 和 `#editor.insertSpaces`
    "editor.detectIndentation": false,
    // 默认tab2个空格"editor.tabSize": 2,
    // 使用tab键进行HTML5快速开发
    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html"
    },
    // 保存时代码自动格式化
    "editor.formatOnSave": true,
    // 去除自动格式化时js加的分号与双引号
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            "semi": false,
            "singleQuote": true
        }
    },
    // 對template代碼格式化
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    // 在输入时显示含有参数文档和类型信息的小面板。
    "editor.parameterHints.enabled": true,
    // 配置emmet是否启用tab展开缩写
    "emmet.triggerExpansionOnTab": true,
    // 控制是否在键入时自动显示建议。
    "editor.quickSuggestions": {
        "other": true,
        "comments": true,
        "strings": true
    }
}复制代码


 类似资料: