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

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

前言

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

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

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

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

理论

参考文章:

VSCode程序猿彩虹屁插件rainbow fart体验篇

vscode 配置vue+vetur+eslint+prettier自动格式化功能

vscode 配置vue+vetur+eslint+prettier自动格式化功能

代码格式化目的:

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

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

  • 缩进是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
 },

 // 指定 *.vue 文件的格式化工具为vetur
 "[vue]": {
 "editor.defaultFormatter": "octref.vetur"
 },
 // 指定 *.js 文件的格式化工具为vscode自带
 "[javascript]": {
 "editor.defaultFormatter": "vscode.typescript-language-features"
 },

 "vetur.format.defaultFormatterOptions": {
 "JS-beautify-HTML": {
 // JS-beautify-HTML的设置在这里
 "wrap_attributes": "force-aligned"
 },
 " prettyhtml": {
 "printWidth'": 100, // 每一行不超过100个字符
 "singleQuote": false, // 不用单引号
 "wrapAttributes": false,
 "sortAttributes": true
 },
 "prettier": {
 // 去掉代码结尾的分号
 "semi": false, //不加分号
 "singleQuote": true, //用单引号
 // #让prettier使用eslint的代码格式进行校验
 "eslintIntegration": true,
 "arrowParens": "always"
 }
 },

 // vscode默认启用了根据文件类型自动设置tabsize的选项
 "editor.detectIndentation": false,
 // 重新设定tabsize
 "editor.tabSize": 2,

 // 保存时自动格式化代码
 "editor.formatOnSave": true,

 //可选项。stylus的格式化配置以及sass格式化配置。
 // 格式化stylus, 需安装Manta's Stylus Supremacy插件
 "stylusSupremacy.insertBraces": false, // 是否插入大括号
 "stylusSupremacy.insertColons": false, // 是否插入冒号
 "stylusSupremacy.insertSemicolons": false, // 是否插入分号
 "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
 "stylusSupremacy.insertNewLineAroundBlocks": false,
 // 启用调试模式。
 "sass.format.debug": false,
 // 删除空格
 "sass.format.deleteEmptyRows": true,
 // 删除最后一个空格。
 "sass.format.deleteWhitespace": true,
 // 将 scss / css 转换为 sass。
 "sass.format.convert": true,
 // 如果 属性:值 为true,则始终设置为1.
 "sass.format.setPropertySpace": true

 /*格式化插件:
//vetur:代码高亮、emmet语法支持、语法错误校验检查、代码提醒、格式化vue。
vetur集成了prettier,让.vue文件中不同的块使用不同的格式化方案,
<template> 调用 html 格式化工具,
<script> 调用 JavaScript 格式化工具,
<style> 使用style格式化工具。

//ESlint:新版的ESlint支持了对.vue文件的校验。

//prettyhtml:为纯HTML模板等提供通用格式化的工具。
//prettier:格式化工具,用于css/less/scss/postcss/ts
//stylus-supremacy:用于格式化stylus文件的node.js模块。
//js的格式化工具用vscode自带的。
Prettier不支持在函数名后面加上括号。这点和ESlint冲突了。

//EditorConfig:主要是用于让 vscode 支持.editorconfig 文件。
.editorconfig 文件中的设置用于在基本代码库中维持一致的编码风格和设置,
例如缩进样式、选项卡宽度、行尾字符以及编码等。
EditorConfig 是让代码创建前保持规范,
Prettier 是让代码保存后保持规范
*/
}

总结

到此这篇关于2020最新版vscode格式化代码的详细教程的文章就介绍到这了,更多相关vscode格式化代码内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

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

    这篇关于vscode格式化配置研究初稿,具体内容如下所示: 前言 之前用vscode进行格式化的时候都是在百度和谷歌上搜"vscode格式化代码"然后直接copy别人.细节的配置一直没去看过. 但是最近一段时间开发项目的时候发现和同组的提交代码的时候格式总是不统一.于是这两天专门看了看插件的官方文档,研究研究. 今天初步有一点研究结果了.会配置一点点了.写此博客与大家共同参考.不足的地方欢迎大家补充,错误的地方欢迎大家纠错. 文章内容包括两个部分:一是理论,二是我的settings.j

  • vscode使用Eslint+Prettier格式化代码的详细操作

    目录 step 1 step 2 step 3 step 4 step 5 最后 效果 step 1 1.安装Eslint插件和Prettier插件 2. 安装eslint npm install eslint -g step 2 1.初始化项目 npm init -y 2.生成eslint配置文件 npx eslint --init 以下是我的配置 完了之后生成一个.eslintrc.json的文件 step 3 1.vscode需要配置保存自动化格式 ⚙ -> 设置 -> Format O

  • vscode安装使用的详细教程

    一.什么是vscode** Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮.智能代码补全.自定义热键.括号匹配.代码片段.代码对比 Diff.GIT 等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化.软件跨平台支持 Win.Mac 以及 Linux. vscode 官网: https://code.visualstudio.com/ 二.Vscode版本 当前最新版本 1.27 2

  • 搭建vscode+vue环境的详细教程

    一.安装vue.js 1.简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js是一个MVVM模式的框架,如果读者有angul

  • VSCode launch.json配置详细教程

    vscode原文地址 以下为vscode 的node.js debugger 的 launch.json 配置详情: 启动配置必须设定请求类型,属性request , 分为launch(启动) 和 attach(附加)两种 ,看下面例子: { "version": "0.2.0", "configurations": [ { ... "request": "launch", //请求类型为启动 }, { .

  • IDEA 2020.3.X 创建scala环境的详细教程

    IDEA 2020.3.X 创建scala环境(默认jdk,maven环境已配置) 一.查看idea中scala兼容版本 二.下载scala 官网下载:https://plugins.jetbrains.com/plugin/1347-scala 下载完成后不需解压 三.下载scala SDK 下载地址:https://www.scala-lang.org/download/ 下载完成后需要解压 四.等待下载成功后返回idea 手动安装: 选择刚刚下载的压缩包 点击ok,然后apply,ok即可

  • IDEA使用MyBatisCodeHelperPro来generator代码的详细教程

    目录 1.介绍 2.安装 3.使用 3.1 实体类自动生成建表语句 3.2 根据数据库表生成bean.mapper.mapper.xml 1.介绍 在开发过程中可以帮助我们通过数据库表生成编写生成bean,mapper,mapper.xml等文件. 可以通过实体类生成建表语句, 根据需要进行调整后到数据库中执行. 支持mapper与xml文件间的相互跳转. MyBatisCodeHelperPro是idea的一个插件,类似于mybatis plugin,但是要收费的,有条件可以买激活码激活. 2

  • IntelliJ IDEA 2020通过设置插件仓库永久激活详细教程(亲测可激活2099年)

    申明:本教程 IntelliJ IDEA 破解补丁.激活码均收集于网络,请勿商用,仅供个人学习使用,如有侵权,请联系作者删除. 注意:请卸载掉之前的破解,才能安装此破解工具,否则会出现idea不能打开的情况~ 最近,找到了一种新的idea激活方法,支持Jetbrains全家桶,没得zhile那么复杂,各种参数,插件补丁体积也特别小~ 官网下载速度比X度快,所以自行到 JetBrains 官网下载需要的IDE安装包.教程演示使用的是IDEA,所有的 JetBrains IDE 激活方式都一样,大胆

  • VSCode 格式化缩进代码的实现

    1)文件 -> 首选项 因为 VsCode 默认启用了根据文件类型自动设置tabsize的选项,在设置中添加: "editor.detectIndentation": false 2)编辑器配置 在项目文件中新建 .editorconfig 文件 为特定类型文件指定缩进大小.缩进类型(空格,或tab),是否自动插入末行等等. root = true [*] charset = utf-8 indent_style = tab indent_size = 4 insert_fina

  • Vscode编辑器的巧妙用法(快速格式化代码的方法)

    相信不少人,写代码忘我的时候,都会忘记层级之间的缩进,导致代码,看着非常不清晰,这个时候,你是否还在手动一点点缩进,这个时候,我们需要利用编辑器的强大功能啦 笔者使用Vscode,一个很好用的编辑器.有许多优秀的插件等待大家的发现 这里笔者推荐 一个格式化神器 看这安装量就知道不错了吧, 相信不少人代码都可能写这样 结构没有层级 安装插件后只需要执行 ctrl + sahift + p 输入 Beautify file 插件将会自动识别帮你进行格式化 但是有些小伙伴,在vue,react等框架页

随机推荐