只用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配置。
现代化家居响应式网站模板1.0
现代化家居响应式网站模板源码是以cmseasy进行开发的家居网站模板。该软件可免费使用，模板附带测试数据！模板源码特点：整体采用浅色宽屏设计，简洁大气，电脑手机自适应布局，大方美观，功能齐全，值得推荐的一款模板，每个页面精心设计，美观大方，兼容各大浏览器；所有代码经过SEO优化，使网站更利于搜索引擎排名，是您做环保类网站的明确选择。无论是在电脑、平板、手机上都可以访问到排版合适的网站，即便是微信等
0 查看详情
就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的Format功能实现代码格式化的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/824870.html
微信扫一扫 
支付宝扫一扫 
