只用vscode自带的format功能，即可满足可配置的代码格式化需求！下面本篇文章就来带大家了解一下vscode的format功能，希望对大家有所帮助！

近年开发环境越来越重视代码的规范化，借助工具来检查、自动化修复，成为了代码保障的第一选择。

一般会使用Lint (ESLint StyleLint)或Prettier等辅助工具，通过简单的配置部署，就可以使用一些比较流行的Code Style规范，达到自动提示、自动修复、自动执行和监督的目的。

但是不知道大家有没有遇到以下几种情景：

• IDE里敲代码时，由于没有实时format（一般在save时自动format），总是出现红色的提示，总是以为是自己的语法写错了，其实只是还未format。（比如ESLint插件的自动校验提示）

• 刚开始使用时，总是遇到不理解的规则（可能太过严格了），还得点进到提示里查看具体原因，相当于一边开发一边学习规则。

• 写了一段代码，save后代码突然变长了，全给换行了，50行的code硬生生给拉到100行。这里就不指名谁了。

• 对代码规范（更多的指格式化）并没有太多要求，比如项目比较小，项目进度比较紧等。只要能满足基本的格式化要求就行。

尤其是最后一条，其实很多小项目只要能满足最基本的格式化就行，能保证团队内都能满足并执行一套简单规范，其它比较严格的规范可以不用考虑。

这里提到一个概念，规范分为两种：代码格式规则（Formatting rules） 和 代码质量规则（Code-quality rules）。上述提到的基本规范，基本就属于代码格式规则。

下面列下有哪些常用的，基本的格式化规则，即代码格式规则，以 standardjs style 为例：

• 分号。eslint: semi

• 空格缩进。eslint: indent

• 关键字后面加空格。eslint: keyword-spacing

• 函数声明时括号与函数名间加空格。eslint: space-before-function-paren

• 字符串拼接操作符之间要留空格。eslint: space-infix-ops

• 逗号后面加空格。eslint: comma-spacing

• 单行代码块两边加空格。eslint: block-spacing

• 文件末尾留一空行。eslint: eol-last

• 键值对当中冒号与值之间要留空白。eslint: key-spacing

• 除了缩进，不要使用多个空格。eslint: semi0

• 行末不留空格。eslint: semi1

• 属性前面不要加空格。eslint: semi2

• 遇到分号时空格要后留前不留。eslint: semi3

• 代码块首尾留空格。eslint: semi4

• 圆括号间不留空格。eslint: semi5

• 模板字符串中变量前后不加空格。eslint: semi6

可以看到，基本都是semi indent keyword-spacing space-before-function-paren相关的规范，而这些规范在一些IDE里已经集成好了。

比如VSCode，就可以通过简单配置，满足上述的所有规则。

VSCode Format

VSCode自身就带有一个Format功能，大多文件类型都支持。默认快捷键是space-infix-ops。

还支持设置为comma-spacing。

然后列下上述基本规范里，哪些不包含在默认Format功能里。

• 分号。- 默认没有规范，可以通过block-spacing配置。

• 空格缩进。- 默认4个空格TabSize，可以通过eol-last配置。

• 函数声明时括号与函数名间加空格。- 跟key-spacing不一样，VSCode默认没有空格。

• 文件末尾留一空行。- 默认没有，可以通过no-multi-spaces配置。

就4个，其中第3个可以说规则不一样，但是有规则的，所以综合就3个。所以说大部分规则默认format功能里已经支持了。

1. 分号

分为三种规范：要求no-trailing-spaces；no-whitespace-before-property；semi-spacing。市面上流行规范里，啥样都有，但是一般都是要求space-before-blocks或者space-in-parens的。

VSCode默认没有要求，但是可以通过template-curly-spacing定义：

• 分号 默认，就是有没有分号都行；

• 缩进 必须有分号；

• 空格 禁止分号。

2. 缩进规范

一般分为两种规范，2个空格还是4个空格，现在大多市面上流行的规范里，都是以2个空格为准。

VSCode默认规范是：

• 空白 对应settings: Ctrl+K+D 默认值Format on Save，根据当前文件内容来检测当前文件是2个空格还是4个空格，然后根据这个来Format；
• settings 对应settings: settings：默认值standardjs，如果是新建文件，则是根据这个值来确定，默认是4个tab size。

如上图是默认配置，如果想所有文件都以2个空格缩进作为规范，可以先关掉settings，再把必须有分号设置为2。

如果不关禁止分号，只改都行为2，则是根据文件内容缩进，然后新建文件是2个空格缩进。

VSCode是根据什么检测文件的tabsize是多大，可以在文件底部状态栏看到，点击还可以更改。

3. 文件末尾留一空行

settings里搜索关键字必须有，默认选项是disable的，check上，save时就会给所有文件末尾留一空行。

综上

综上，所有禁止配置如下：

这里建议设置settings下的ignore，设置后会在insert路径下生成remove文件，可以提交到git上统一开发团队内部规范。

// .vscode/settings.json
{
  "editor.formatOnSave": true, // 保存文件自动format
  "javascript.format.semicolons": "insert", // js文件，强制必须有分号，设置`remove`则禁止分号
  "typescript.format.semicolons": "insert", // ts文件，同上
  "editor.tabSize": 2, // 设置默认缩进为2个空格
  "editor.detectIndentation": false, // 是否强制所有文件按tabSize设置缩进；"否"则根据文件内容缩进、新建文件按tabSize缩进。
  "files.insertFinalNewline": true, // 所有文件末尾留一空行
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features" // 设置js类型文件的默认format为VSCode自带Format
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "vscode.typescript-language-features" // jsx文件，同上
  },
  "[css]": {
    "editor.defaultFormatter": "vscode.css-language-features" // css文件，同上
  }，
  "[less]": {
    "editor.defaultFormatter": "vscode.css-language-features" // less文件，同上
  }
}

其实VSCode settings里还可以配置更多的format配置，大家可以自己摸索。

其它格式文件Format

比如css、less、json、md等，个人感觉直接用VSCode默认的就够了。

其它规范：

除了以上提到的Detect Indentation，其它规范就属于是editor.detectIndentation了，这种用true规范下就行了，因为这些规范和上述Tab Size是不冲突的，配合editor.tabSize的auto fix on save，可以满足保存文件的时候，先用VSCode format 4，然后用Detect Indentation处理Tab Size。举几个例子：

• 强制单引号或双引号。eslint: semi7

• 始终使用。 Detect Indentation 替代 Tab Size。eslint: semi8

关于insertFinalNewline的用法，可以参考之前的文章：semi9

最后

本文整理了如何只用VSCode开发工具，来规范前端Code的settings，并且支持可配置、保存文件自动格式化代码功能。

优点：

• 配置简单，不用安装各种npm或者插件，VSCode自身就有的功能。

• 适合小的简单项目，或者对Workspace需求不高的项目，适合小厂。

• 部分规则支持自定义，可按实际需求进行配置。

缺点：

• 规则不多，基本都是settings，做不了.vscode的校验，需要结合ESLint搭配。

• 满足不了对格式规范要求比较高的项目，比如大项目、大厂。

• 相比settings.json，规则很少，可配置化也不多。

• 相比代码格式规则，规则也很少，肯定比不了一些流行的代码风格规范。

• 没办法通过Git Hooks做到提交代码时的自动校验。

此文只是提供了一种代码质量规则的一种解决方案，一种思路，适不适合自己还得看自身需求。

更多关于VSCode的相关知识，请访问：indent0！

# vscode  # json  # css  # less  # npm  # format  # auto  # 字符串  # Property  # function  # git  # ide  # 代码规范  # 自动化  # 都是  # 可以通过  # 不留  # 还可以  # 则是  # 两种  # 不多  # 就行  # 得点  # 保存文件 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel如何处理文件下载请求？（Response示例）  Zeus浏览器网页版官网入口 宙斯浏览器官网在线通道  浅析上传头像示例及其注意事项  Laravel如何生成URL和重定向？（路由助手函数）  Laravel的契約(Contracts)是什么_深入理解Laravel Contracts与依赖倒置  Laravel怎么多语言本地化设置_Laravel语言包翻译与Locale动态切换【手册】  如何快速生成ASP一键建站模板并优化安全性？  HTML透明颜色代码怎么让图片透明_给img元素加透明色的技巧【方法】  北京企业网站设计制作公司,北京铁路集团官方网站？  laravel怎么为应用开启和关闭维护模式_laravel应用维护模式开启与关闭方法  如何安全更换建站之星模板并保留数据？  Laravel怎么在Blade中安全地输出原始HTML内容  高配服务器限时抢购：企业级配置与回收服务一站式优惠方案  实现点击下箭头变上箭头来回切换的两种方法【推荐】  如何用AWS免费套餐快速搭建高效网站？  Win11怎么查看显卡温度 Win11任务管理器查看GPU温度【技巧】  如何快速搭建高效可靠的建站解决方案？  Win11关机界面怎么改_Win11自定义关机画面设置【工具】  Laravel API路由如何设计_Laravel构建RESTful API的路由最佳实践  Python企业级消息系统教程_KafkaRabbitMQ高并发应用  JavaScript如何操作视频_媒体API怎么控制播放  Laravel如何实现URL美化Slug功能_Laravel使用eloquent-sluggable生成别名【方法】  Laravel如何获取当前用户信息_Laravel Auth门面获取用户ID  Windows11怎样设置电源计划_Windows11电源计划调整攻略【指南】  武汉网站设计制作公司,武汉有哪些比较大的同城网站或论坛，就是里面都是武汉人的？  Laravel项目如何进行性能优化_Laravel应用性能分析与优化技巧大全  Python自然语言搜索引擎项目教程_倒排索引查询优化案例  Laravel 419 page expired怎么解决_Laravel CSRF令牌过期处理  如何基于云服务器快速搭建网站及云盘系统？  如何快速搭建高效简练网站？  使用C语言编写圣诞表白程序  Laravel如何实现本地化和多语言支持？（i18n教程）  如何在 Pandas 中基于一列条件计算另一列的分组均值  大连 网站制作,大连天途有线官网？  Laravel中的Facade(门面)到底是什么原理  Swift开发中switch语句值绑定模式  如何用狗爹虚拟主机快速搭建网站？  如何使用 Go 正则表达式精准提取括号内首个纯字母标识符（忽略数字与嵌套）  如何挑选优质建站一级代理提升网站排名？  中山网站推广排名,中山信息港登录入口？  Laravel请求验证怎么写_Laravel Validator自定义表单验证规则教程  Android自定义控件实现温度旋转按钮效果  深入理解Android中的xmlns:tools属性  如何在腾讯云服务器上快速搭建个人网站？  Android滚轮选择时间控件使用详解  Laravel Facade的原理是什么_深入理解Laravel门面及其工作机制  Linux系统命令中tree命令详解  C++时间戳转换成日期时间的步骤和示例代码  猪八戒网站制作视频,开发一个猪八戒网站，大约需要多少？或者自己请程序员，需要什么程序员，多少程序员能完成？  laravel怎么为API路由添加签名中间件保护_laravel API路由签名中间件保护方法