vsCode配置代码格式化

2019-09-12 admin
在编译器vscode上配置ESLint、Prettier、Vetur这个三个插件,然后在编译器左上角文件的首选项中找到设置,搜索找到setting.json文件进行配置。
配置如下:

{ “workbench.editor.enablePreview”: false, //打开文件不覆盖 "search.followSymlinks": false, //关闭rg.exe进程 "editor.minimap.enabled": false, //关闭快速预览 "files.autoSave": “afterDelay”, //打开自动保存 "editor.lineNumbers": “on”, //开启行数提示 "editor.quickSuggestions": { //开启自动显示建议

"other": true,
"comments": true,
"strings": true

}, “editor.tabSize”: 2, //制表符符号eslint "editor.formatOnSave": true, //每次保存自动格式化 "eslint.autoFixOnSave": true, // 每次保存的时候将代码按eslint格式进行修复 "prettier.eslintIntegration": true, //让prettier使用eslint的代码格式进行校验 "prettier.semi": true, //去掉代码结尾的分号 "prettier.singleQuote": true, //使用单引号替代双引号 "prettier.trailingComma": “none”, //去除对象最末尾元素跟随的逗号 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格 "vetur.format.defaultFormatter.html": “js-beautify-html”, //格式化.vue中html "vetur.format.defaultFormatter.js": “vscode-typescript”, //让vue中的js按编辑器自带的ts格式进行格式化 "vetur.format.defaultFormatterOptions": {

"js-beautify-html": {
  "wrap_attributes": "force-aligned" //属性强制折行对齐
}

}, “eslint.validate”: [ //开启对.vue文件中错误的检查

"javascript",
"javascriptreact",
{
  "language": "html",
  "autoFix": true
},
{
  "language": "vue",
  "autoFix": true
}

], "[javascript]": {

"editor.defaultFormatter": "esbenp.prettier-vscode"

}, “terminal.integrated.rendererType”: “dom”, "[typescript]": {

"editor.defaultFormatter": "esbenp.prettier-vscode"

} }

[转载]原文链接:https://segmentfault.com/a/1190000020371086

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-74965.html

文章标题:vsCode配置代码格式化

相关文章
js实现的tab标签切换效果代码分享
这是一款基于js实现的tab标签切换效果,是一款无需jQuery,原生javascript制作的tab切换效果源码。点击上面的标题即可实现对应页面的切换功能,非常具有实用价值。 为大家分享的js实现的tab标签切换效果代码如下 <!...
2017-03-31
Bootstrap显示与隐藏简单实现代码
本文实例为大家分享了bootstrap显示隐藏的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="utf-8"> <meta http...
2017-03-14
最简单的JavaScript图片轮播代码(两种方法)
通过改变每个图片的opacity属性: 素材图片: 代码一: <!DOCTYPE html> <html lang="en"> <head> <meta cha...
2017-03-21
bootstrap table 数据表格行内修改的实现代码
js中设置列的属性 editable : { type : 'text',//数据显示在文本框内 emptytext : "--",//数据为空时显示 vali...
2017-03-14
js漂浮广告实现代码
本文实例讲述了js实现漂浮广告的方法。分享给大家供大家参考。具体如下: 具体代码如下: <html xmlns="http://www.w3.org/1999/xhtml"&...
2017-03-29
js实现点击文本框显示日期选择器特效代码分享
本文实例讲述了JS+CSS实现美化的下拉列表框效果。分享给大家供大家参考。具体如下: 三款款经过JS+CSS美化的下拉列表,效果很不错,总有一款适合你,先看看运行效果图: 具体代码如下: <head> <meta htt...
2017-03-29
JS实现转动随机数抽奖的特效代码
大家都玩过抽奖游戏,或者梦想抽到大奖吧,但是有没有想过抽奖游戏是怎么实现的呐?今天就给大家分享一款转动随机数抽奖的JS特效代码。 实现代码如下 <!Doctype html> <html> <head> ...
2017-03-29
js实现带圆角的两级导航菜单效果代码
本文实例讲述了js实现带圆角的两级导航菜单效果代码。分享给大家供大家参考。具体如下: 这是一款使用JS做的圆角菜单,支持两级菜单显示,本人比较喜欢的风格,修改使用方便,新手也能上手快。使用有几张圆角图片来修饰了菜单,喜欢的朋友可以下载代码留...
2017-03-29
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
本文实例讲述了JS实现可直接显示网页代码运行效果的HTML代码预览功能。分享给大家供大家参考。具体如下: JavaScript实现HTML代码预览功能,直接在网页上显示代码运行的效果,就例如点击“运行代码”后的效果,使用时,你只需将需要运行...
2017-03-27
js实现温度计时间样式代码分享
这是一款基于js实现温度计时间样式代码,与我们见过的日期显示都不一样,很有创意,分享给大家学习学习 运行效果图: 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。 为大家分享的javascript实现温度计时间样式代码如下 &lt...
2017-03-29
回到顶部