VS Code 代码格式化

这几天在接触学习 sass 的时候，可以将 sass 文件编译成 css 文件，但是当代码过多的时候，看起来并不美观，甚至还有一点乱糟糟的感觉。
对于我这个天秤座的人来说只能接受优雅美观的东西，所以为了让代码看起来更加优美，我们需要配置 vscode 使其具有代码格式化功能。

一：.需要安装三个插件

1.ESLint

2.Prettier - Code formatter

3.Vetur

二：在 setting 下设置

打开 setting 的方式

对于Windows file --> preferences -->setting
对于MAC Code --> preferences -->setting

我这里以 Windows 为例

三：打开 setting.json 文件

在 setting 界面中右上角有一个打开图标，点击即可打开 setting.json 文件

在 setting.json 文件中添加配置

配置代码如下：

{// tab 大小为2个空格 "editor.tabSize": 2,// 100 列后换行"editor.wordWrapColumn": 100,// 保存时格式化"editor.formatOnSave": true,// 开启 vscode 文件路径导航  "breadcrumbs.enabled": true,// prettier 设置语句末尾不加分号  "prettier.semi": false,// prettier 设置强制单引号  "prettier.singleQuote": true,// 选择 vue 文件中 template 的格式化工具  "vetur.format.defaultFormatter.html": "prettyhtml",// 显示 markdown 中英文切换时产生的特殊字符  "editor.renderControlCharacters": true,// 设置 eslint 保存时自动修复  "eslint.autoFixOnSave": true,// eslint 检测文件类型  "eslint.validate": ["javascript","javascriptreact",{"language": "html","autoFix": true},{"language": "vue","autoFix": true}],// vetur 的自定义设置  "vetur.format.defaultFormatterOptions": {"prettier": {"singleQuote": true,"semi": false}}
}

四：重启 VS Code 即可。

代码格式化方法：
选中我们需要格式化的代码右击，会有一个 Format Document 选项，点击一下即可格式化；或者选中代码利用快捷键 Shift + Alt + F进行格式化

五：效果如下

格式化之前：代码与括号拥挤一行

格式化以后：代码与括号分开，看起来会更加舒畅。

如有错误请联系我，会及时修改，biubiubiu~

VS Code 代码格式化相关推荐

Visual Studio code 代码格式化整理
vs code格式化代码的快捷键如下:(来源于这里) On Windows Shift + Alt + F On Mac Shift + Option + F On Ubuntu Ctrl + Shi ...
vscode代码格式排列_Visual Studio code 代码格式化整理
vs code格式化代码的快捷键如下:(来源于这里) On Windows Shift + Alt + F On Mac Shift + Option + F On Ubuntu Ctrl + Shi ...
VS Code 代码格式化（4个空格）(Vue)
首选项-设置-搜索tabSize "editor.detectIndentation": false, // 改为false,这里默认是true "vetur.forma ...
VS Code编写HTML-CSS-JS等——代码格式化
VS Code编写HTML-CSS-JS等--代码格式化步骤总结功能:保存时自动将代码进行格式标准化步骤 VS Code扩展中搜索:Prettier - Code formatter 点击安装 ...
2 snippets vue 修改配置_vue-snippets: 支持 Vue 3 的语法高亮，代码格式化和代码提示的 Visual Studio Code 插件。...
Vue 2/3 代码片段语法高亮格式化插件这是一款在 Vue 2 或者 Vue 3 开发中提供代码片段,语法高亮和格式化的 VS Code 插件,能极大提高你的开发效率. 你可以在 VS Cod ...
Vs Code 快速格式化代码
Vs Code快速格式化代码: Shift+Alt+F 或者右键单击格式化文档或者设置当我们保存页面的时候自动格式化代码 1)文件–首选项–设置 2)搜索框内输入 emmet.include; 3) ...
Pycharm使用black作为Python代码格式化外部工具
Pycharm菜单Code->Reformat Code能对Python代码进行格式化,但是black能进一步规范格式,它是PEP8的严格子集. 本次操作的相关环境信息如下:Pycharm 20 ...
dotnet 将自动代码格式化机器人带入团队 GitLab 平台
给团队带入一个代码格式化机器人能提升团队的幸福度,让团队的成员安心写代码,不用关注代码格式化问题,将格式代码这个粗活交给机器人去做.同时也能减少在代码审查里撕格式化问题的时间,让更多的时间投入到更 ...
dotnet 基于 dotnet format 的 GitHub Action 自动代码格式化机器人
是不是大家也会觉得代码审查里面审查代码格式化问题是无意义的,但是不审查又觉得过不去?是否有个专门的工具人,用来协助修复代码格式化的问题?本文来安利大家一个特别好用的方法,使用 dotnet 完全开源的 ...
使用 ReSharper，输入即遵循 StyleCop 的代码格式化规范
StyleCop 可以帮助强制执行代码格式化规范,ReSharper 可以帮助你更高效地编写代码.把两者结合起来,你便能高效地编写符合团队强制格式化规范的代码来. 本文就介绍如何使用 ReSharpe ...