加入收藏 | 设为首页 | 会员中心 | 我要投稿 应用网_阳江站长网 (https://www.0662zz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 创业 > 政策 > 正文

2020最新版vscode格式化代码的详细教程

发布时间:2020-11-17 02:27:29 所属栏目:政策 来源:做站长
导读:这篇文章主要介绍了2020最新版vscode格式化代码的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下。 这篇关于vscode格式化配置研究初稿,具体内容如下所示: 前言 之前用vscode进行格式化的时候都是

这篇文章主要介绍了2020最新版vscode格式化代码的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下。

这篇关于vscode格式化配置研究初稿,具体内容如下所示:

前言

之前用vscode进行格式化的时候都是在百度和谷歌上搜“vscode格式化代码”然后直接copy别人。细节的配置一直没去看过。

但是最近一段时间开发项目的时候发现和同组的提交代码的时候格式总是不统一。于是这两天专门看了看插件的官方文档,研究研究。

今天初步有一点研究结果了。会配置一点点了。写此博客与大家共同参考。不足的地方欢迎大家补充,错误的地方欢迎大家纠错。

文章内容包括两个部分:一是理论,二是我的settings.json的配置。

代码格式化目的:

代码格式化的目的一是为了提高代码可读性,方便自己编码,方便团队开发;二是方便找出和修正因为格式导致的错误。

在团队开发。因为每个人的编码习惯不同,如

缩进是2还是4。

代码结尾是否加分号,用单引号还是用双引号。

函数和后面的括号之间是否加个空格。

等等

统一代码格式,让每个人开发更顺利。

为了完成第一个目的,格式化插件有vetur、prettier等针对文件进行格式化的插件;

为了完成第二个目的,格式化插件有ESlint等对文件进行代码检验的插件。

代码格式化的注意事项:

插件作用

首先明白格式化插件分别侧重格式化哪些文件,因为不同的文件有不同的格式规范。

prettyhtml格式化HTML;
prettier格式化css/less/scss/postcss/ts;
stylus-supremacy格式化stylus;
vscode自带格式化插件格式化js;
vetur格式化.vue文件;让不同块使用不同的格式化方案
ESlint:新版的ESlint支持了对.vue文件的校验。

符合代码检验

然后注意让格式化的代码符号ESlint代码检验。

格式化代码最重要的是两点,一点是用格式化插件格式化对应的文件;另一点是让格式化后的代码能通过代码检验工具。

举个例子。

Prettier插件不支持在函数名后面加上括号。这点和ESlint冲突了。所以js的格式化不能使用prettier插件格式化,而是使用vscode自带的js格式化功能来格式化。否则ESlint就是报错,简直烦死强迫症。

插件更新

最后要注意插件的是插件不断更新的,所以网上直接copy的格式化代码会各种不兼容。

如vscode 的 ESLint 插件在某个版本已经移除了 “eslint.validate” 这个配置选项,而网上很多教程都是使用的这个。

在新版的 ESLint 中已经支持了对 *.vue 文件的校验,所以无需再进行这项配置了,只需要添加一个保存时自动修复 ESLint 错误的功能就行了。

代码格式化插件的官方文档:

语言介绍

pug:官方文档 。pug是一款专门为node.js平台开发的HTML模块引擎。

less:官方文档。less是一门CSS预处理语言。

scss:官方文档。scss(sass)是世界上最成熟、稳定强大的专业级CSS预处理语言。

postcss:官方文档。postcss是使用js插件来转换CSS的工具。

stylus:官方文档。stylus是node.js平台上的CSS预处理框架。

插件介绍

vetur:官方文档。代码高亮、emmet语法支持、语法错误校验检查、代码提醒、格式化vue。

vetur集成了prettier,让.vue文件中不同的块使用不同的格式化方案,template标签调用 html 格式化工具,script标签调用 JavaScript 格式化工具,style标签使用style格式化工具。

ESlint:官方文档。代码检验。

prettyhtml:官方文档。为vue或纯HTML模板等提供通用格式化的工具。

pretties:官方文档。代码格式化工具,能够解析代码,使用用户设定的规则格式化规范的代码。

stylus-supremacy:官方文档。用于格式化stylus文件的node.js模块。

我的settings.json文件

{
/*格式化文件对应插件:
主要是两步,一步是用格式化插件格式化对应的文件;
另一步让格式化后的代码能通过代码检验工具。
prettyhtml格式化HTML;prettier格式化css/less/scss/postcss/ts;
stylus-supremacy格式化stylus;
vscode自带格式化插件格式化js;
vetur格式化.vue文件;
ESlint进行代码检验。
*/

/*格式化思路和注意事项。
注意格式化的代码能符合ESlint代码检验。
1.用vetur设置默认格式化工具。格式化.vue文件
2.用ESlint设置保存时修复ESlint错误的功能。
3.用prettier格式化css;去除语法结尾的分号,使用单引号替换双引号。
4.保存时自动格式化。
*/

// 默认使用prettier格式化支持的文件
“editor.defaultFormatter”: “esbenp.prettier-vscode”,

“vetur.format.defaultFormatter.html”: “prettyhtml”,
“vetur.format.defaultFormatter.css”: “prettier”,
“vetur.format.defaultFormatter.postcss”: “prettier”,
“vetur.format.defaultFormatter.scss”: “prettier”,
“vetur.format.defaultFormatter.less”: “prettier”,
“vetur.format.defaultFormatter.stylus”: “stylus-supremacy”,
// “vetur.format.defaultFormatter.js”: “prettier”,
“vetur.format.defaultFormatter.ts”: “prettier”,
“vetur.format.defaultFormatter.sass”: “sass-formatter”,
“open-in-browser.default”: “Chrome”,

// 将vetur的js格式化工具指定为vscode自带的
“vetur.format.defaultFormatter.js”: “vscode-typescript”,
// 移除js语句的分号
“javascript.format.semicolons”: “remove”,
// 在函数名后面加上括号,类似这种形式 foo () {}
“javascript.format.insertSpaceBeforeFunctionParenthesis”: true,

// eslint配置项,保存时自动修复错误。
“editor.codeActionsOnSave”: {
“source.fixAll”: true
},

(编辑:应用网_阳江站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读