VScode自动格式化代码减少build时的问题

在用VScode中写vue项目build时,经常不能通过代码检查, 多数原因是之前的编码习惯引起的, 比如引号, 空格, 换行,分号等。

用好VScode的格式化功能对此可以有很大的帮助。

但发现VScode自动格式化时不会自动去掉多余分号, 网上搜索出来的试了都不行。

还是自己仔细研究了一下设置选项, 给搞好了.

以下是我最后的配置方法:

一、安装插件:

Vetur, ESLint,Prettier

二、修改配置

{//====== 通用选项 ======"terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\cmd.exe","npm.packageManager": "npm","workbench.sideBar.location": "left","workbench.activityBar.visible": true,"workbench.statusBar.visible": true,"editor.minimap.enabled": false,"workbench.iconTheme": "vscode-icons","editor.renderLineHighlight": "all","editor.renderWhitespace": "selection","editor.mouseWheelZoom": true,"editor.cursorWidth": 3,//"workbench.colorTheme": "Solarized Dark"      //暗阴//"workbench.colorTheme": "Monokai Dimmed"      //暗暖//"workbench.colorTheme": "Monokai"             //暗凉//"workbench.colorTheme": "Visual Studio Light" //亮//====== vscode自带格式化功能配置 ======"editor.formatOnSave": true,"editor.formatOnType": true,"editor.formatOnPaste": true,"editor.detectIndentation": false, //关闭检测第一个tab后面就tab"editor.renderControlCharacters": true, //制表符显示->"editor.insertSpaces": true, //转为空格"editor.tabSize": 2, //tab为四个空格"javascript.format.semicolons": "remove","typescript.format.semicolons": "remove","javascript.format.insertSpaceBeforeFunctionParenthesis": true, //函数名与()间加空隔"javascript.preferences.quoteStyle": "single","typescript.preferences.quoteStyle": "single","javascript.format.enable": true, //自带默认javascript格式化"typescript.format.enable": true, //自带默认typescript格式化"json.format.enable": true, //自带默认json格式化"html.format.indentInnerHtml": false, //自带默认html格式化//====== prettier格式化,能使每一种语言默认格式化规则 ======"editor.defaultFormatter": "esbenp.prettier-vscode","prettier.printWidth": 100, // 超过最大值换行"prettier.tabWidth": 2, // 缩进字节数"prettier.useTabs": false, // 缩进不使用tab，使用空格"prettier.semi": false, // 句尾分号"prettier.singleQuote": true, // 使用单引号代替双引号"prettier.arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号"prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }""prettier.jsxSingleQuote": true, // 在jsx中使用单引号代替双引号//"prettier.trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）// --- 部分文件格式化在后面单独设置 ---"prettier.disableLanguages": ["vue","typescript","javascript","jsonc"],//====== 单独设置文件格式化 ======"[jsonc]": {"editor.defaultFormatter": "vscode.json-language-features"},"[javascript]": {"editor.defaultFormatter": "vscode.typescript-language-features"},"[typescript]": {"editor.defaultFormatter": "vscode.typescript-language-features"},// ------ 用vetur格式化vue文件配置 ------"[vue]": {"editor.defaultFormatter": "octref.vetur"},"vetur.format.defaultFormatter.html": "js-beautify-html","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.js": "vscode-typescript", //解决不了 双引号需要自动转单引号的需求, 不过通过eslint插件保存时自动修复"vetur.format.defaultFormatter.ts": "vscode-typescript", //同上"vetur.format.defaultFormatterOptions": {"js-beautify-html": {//"wrap_attributes": "force-aligned","wrap_attributes": "force-expand-multiline"},"prettyhtml": {"singleQuote": false,"sortAttributes": false,},"prettier": {"printWidth": 200,"singleQuote": true, //使用单引号替换双引号"semi": false //结尾不加分号},/* "vscode-typescript": {"singleQuote": true, //使用单引号替换双引号,但配置后好像还是没有反应"semi": false //结尾不加分号} */},// ====== eslint 保存时自动修复格式配置 ======"editor.codeActionsOnSave": {"source.fixAll.eslint": true, // For ESLint"source.fixAll.tslint": true, // For TSLint"source.fixAll.stylelint": true // For Stylelint},"eslint.validate": ["javascript","javascriptreact","typescript","typescriptreact","html","vue","less","scss",],"eslint.format.enable": true,
}

三、配置要点

大多数用prettier格式化, vue用vetur格式化, js部份及js文件用vscode自带的格式化, 并用ESLint加上保存时自动修复。

这样写完代码保存后，再执行build时问题应该就会少很多了.

VScode自动格式化代码减少build时的问题相关推荐

如何让VsCode自动格式化代码？
文章目录一.展示格式混乱的代码二.设置粘贴.保存时自动格式化代码三.演示代码自动格式化一.展示格式混乱的代码虽然不影响程序运行结果,但是代码看着混乱不堪,如果手动格式化,那真是费事! 二.设 ...
Python+PEP8 | VSCode自动格式化代码
PEP8 是针对 python 代码格式而编订的风格指南,它可以使代码更加易读易懂.记住 PEP8 的每一条规范略有难度,幸运的是 VSCode 已经为我们准备好一切了. 打开设置,搜索 python ...
vscode自动格式化不符合eslint_VsCode（Visual Studio Code）格式化代码符合EsLint
利用Visual Studio Code ESlint插件,实现自动格式化代码步骤一:安装ESlint插件=>点击Extensions或者Ctrl+Shift+X=>搜索ESlint=& ...
VScode保存代码时自动格式化代码
一. 安装插件vetur 安装此插件后就可以使用快捷键[shift]+[Alt]+[F]来格式化代码了. 二. 实现保存时自动格式化代码 1)文件 ------.>[首选项]---------- ...
vscode如何设置自动保存时自动格式化代码
Vscode 快速格式化代码: shift+alt+f 也可以设置当我们保存页面的时候自动格式化代码: 1)文件 ------.>[首选项]---------->[设置]: 2)搜索e ...
html5 自动格式化,VSCode插件JS-CSS-HTML Formatter自动格式化代码
VSCode插件JS-CSS-HTML Formatter自动格式化代码当你Ctrl+S保存代码时,自动格式化代码.本来很好用,但是修改thinkphp模板文件时,就有问题了.因为js代码里面,调用 ...
【22新版VSCode】配置自动格式化代码(保存文件自动格式化代码和tab自动格式化代码)
做html开发时,使用快捷键alt+shift+f格式化代码并不是很方便. 想配置自动格式化代码,发现新版本vs code配置方法有点不一样.记录一下. 问题描述a 22年新版vs code配置&qu ...
初用VScode并配置，自定义代码片段（快捷键），自动格式化代码快捷键，保存格式化代码快捷键
一.VScode 介绍.下载.安装. 一个运行于 Mac OS X.Windows和 Linux 之上的,针对于编写现代 Web 和云应用的跨平台源代码编辑器. 免费,可以直接去微软官网去下载.htt ...
vscode中怎样格式化js代码_VSCode插件JS-CSS-HTML Formatter自动格式化代码
VSCode插件JS-CSS-HTML Formatter自动格式化代码当你Ctrl+S保存代码时,自动格式化代码.本来很好用,但是修改thinkphp模板文件时,就有问题了.因为js代码里面,调用 ...
vscode --- 快捷键格式化代码时,分号消失
问题复现最近在vscode中,格式化代码(快捷键 alt + shift + F)时,分号会莫名奇妙的消失对于习惯打分号的我来说,看起来很别扭- 解决方案. 我使用的是prettier这个插件来设 ...

VScode自动格式化代码减少build时的问题

一、安装插件:

二、修改配置

三、配置要点

VScode自动格式化代码减少build时的问题相关推荐

最新文章

热门文章