vs code 格式化代码配置

最近公司项目加入了 ESlint 检查，然后各种飘红！！！

现在用的插件：

ESlint： javascript代码检查工具

vutur：一个非常强大的插件，但是也有不足之处，在格式化 vue 文件时，会自动给你加上双引号、分号等，这就需要额外的配置来解决与ESlint的冲突

解决配置：

记得以前只需要在 vs code 编辑器中依次点击文件 --- 首选项 --- 设置就能自动打开到配置文件了，现在新版本你却给我看这个？？？

现在主要需要的配置是解决 vutur 格式化时会自动给我加上双引号、分号这些规则去除，那就需要搜索一下 settings.json

直接点击后就会弹出一个 json 的配置文件

在这里你可以愉快的配置你想要的格式化文件的格式！！！

这里是我的 settings.json 配置

{"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe","diffEditor.ignoreTrimWhitespace": false,// vscode默认启用了根据文件类型自动设置tabsize的选项"editor.detectIndentation": false,// 重新设定tabsize"editor.tabSize": 2,// #每次保存的时候自动格式化"editor.formatOnSave": true,//  #去掉代码结尾的分号"prettier.semi": false,// #每次保存的时候将代码按eslint格式进行修复"eslint.autoFixOnSave": true,// 添加 vue 支持"eslint.validate": ["javascript","javascriptreact",{"language": "vue","autoFix": true}],//  #让prettier使用eslint的代码格式进行校验"prettier.eslintIntegration": true,//  #使用带引号替代双引号"prettier.singleQuote": true,//  #让函数(名)和后面的括号之间加个空格"javascript.format.insertSpaceBeforeFunctionParenthesis": true,// #这个按用户自身习惯选择"vetur.format.defaultFormatter.html": "js-beautify-html",// #让vue中的js按编辑器自带的ts格式进行格式化"vetur.format.defaultFormatter.js": "vscode-typescript","vetur.format.defaultFormatterOptions": {"js-beautify-html": {"wrap_attributes": "force-aligned"// #vue组件中html代码格式化样式}},// 格式化stylus, 需安装Manta's Stylus Supremacy插件"stylusSupremacy.insertColons": false, // 是否插入冒号"stylusSupremacy.insertSemicolons": false, // 是否插入分好"stylusSupremacy.insertBraces": false, // 是否插入大括号"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行"stylusSupremacy.insertNewLineAroundBlocks": false // 两个选择器中是否换行
}

你可能还需要安装的插件：

Prettier - Code formatter: 虽然 vetur 说不用安装，可能其内部安装了，但是保险起见还是安装一下，这个只关注格式化，并不具备语法检查能力

Manta's Stylus Supremacy: vetur 还有一个特别讨厌的地方就是把你 stylus 的文件全部格式化加上大括号和分号，本来就奔着 stylus不用写这些东西的简约风格用的但是最后格式化一下它又给我加上了，搞得我后来维护代码时又需要每行 css 代码都强迫上自己加上大括号，真是烦的不要不要的，有了这个插件就没有这个烦恼了

vs code 格式化代码配置相关推荐

【小知识】VScode格式化代码配置及插件
VScode格式化代码配置及插件学会使用扩展和配置,能让你的vs code生产效率提高百分之二十 --鲁迅打开setting(新版vscode打开方式2019版) 先按步骤打开 setting 界 ...
IDE使用经验——阿里代码规范 Eclipse格式化代码配置
最近同事推荐了一个eclipse格式化代码的配置,使用之后觉得不错,于是自己配置后并导出xml,方便别人使用. 以下是源文件: 配置方式: eclipse配置代码格式的codestyle.xml文件, ...
vs code格式化代码
1.安装插件插件ESLint:格式化代码插件Vetur:HTML格式化代码缩进 2.修改settings.json增加配置,ctrl+s保存后自动格式化代码文件-首选项-设置,点击右上角的小文件 ...
IDEA：Reformat Code 格式化代码
目录前言 Reformat Code 重新格式化代码 Options 选项 Include subdirectories 包含子目录 Optimize imports 优化导入 Rearrange ...
PyCharm自动格式化代码
PyCharm自动格式化代码在我们使用PyCharm编写代码的过程中,难免会存在一些格式上的不规范行为,比如:注释#后面要加空格,空行等等.那么下面就介绍一下PyCharm中自动规范代码格式方法. ...
【22新版VSCode】配置自动格式化代码(保存文件自动格式化代码和tab自动格式化代码)
做html开发时,使用快捷键alt+shift+f格式化代码并不是很方便. 想配置自动格式化代码,发现新版本vs code配置方法有点不一样.记录一下. 问题描述a 22年新版vs code配置&qu ...
初用VScode并配置，自定义代码片段（快捷键），自动格式化代码快捷键，保存格式化代码快捷键
一.VScode 介绍.下载.安装. 一个运行于 Mac OS X.Windows和 Linux 之上的,针对于编写现代 Web 和云应用的跨平台源代码编辑器. 免费,可以直接去微软官网去下载.htt ...
vs code保存自动格式化代码及eslint/tslint修复-太爽（丝滑般的感觉）
现在没有前后端分离的开发模式都不好意思跟同行交流.前后端分离的好处这里就不再赘述了. 本司开发的系统是基于Angular(ng zorro),TypeScript,后台采用Spring Boot.写前 ...
idae 格式化代码设置eslint_VSCode中使用vue项目ESlint验证配置
如果在一个大型项目中会有多个人一起去开发,为了使每个人写的代码格式都保持一致,就需要借助软件去帮我们保存文件的时候,自己格式化代码解决办法:vscode软件下载一个ESLint,在到设置里面找到se ...
deepin终端编译c程序_C/C++知识点之Ubuntu / Debian / Deepin等 Sublime Text 3 配置C++环境(一键编译运行，格式化代码)...
本文主要向大家介绍了 C/C++知识点之Ubuntu / Debian / Deepin等 Sublime Text 3 配置C++环境(一键编译&运行,格式化代码),通过具体的内容向大家展示 ...

vs code 格式化代码配置

vs code 格式化代码配置相关推荐

最新文章

热门文章