域名預(yù)訂/競(jìng)價(jià),好“米”不錯(cuò)過(guò)
這篇文章主要介紹了2020最新版vscode格式化代碼的相關(guān)知識(shí),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下。
這篇關(guān)于vscode格式化配置研究初稿,具體內(nèi)容如下所示:
前言
之前用vscode進(jìn)行格式化的時(shí)候都是在百度和谷歌上搜“vscode格式化代碼”然后直接copy別人。細(xì)節(jié)的配置一直沒(méi)去看過(guò)。
但是最近一段時(shí)間開(kāi)發(fā)項(xiàng)目的時(shí)候發(fā)現(xiàn)和同組的提交代碼的時(shí)候格式總是不統(tǒng)一。于是這兩天專門(mén)看了看插件的官方文檔,研究研究。
今天初步有一點(diǎn)研究結(jié)果了。會(huì)配置一點(diǎn)點(diǎn)了。寫(xiě)此博客與大家共同參考。不足的地方歡迎大家補(bǔ)充,錯(cuò)誤的地方歡迎大家糾錯(cuò)。
文章內(nèi)容包括兩個(gè)部分:一是理論,二是我的settings.json的配置。
代碼格式化目的:
代碼格式化的目的一是為了提高代碼可讀性,方便自己編碼,方便團(tuán)隊(duì)開(kāi)發(fā);二是方便找出和修正因?yàn)楦袷綄?dǎo)致的錯(cuò)誤。
在團(tuán)隊(duì)開(kāi)發(fā)。因?yàn)槊總€(gè)人的編碼習(xí)慣不同,如
縮進(jìn)是2還是4。
代碼結(jié)尾是否加分號(hào),用單引號(hào)還是用雙引號(hào)。
函數(shù)和后面的括號(hào)之間是否加個(gè)空格。
等等
統(tǒng)一代碼格式,讓每個(gè)人開(kāi)發(fā)更順利。
為了完成第一個(gè)目的,格式化插件有vetur、prettier等針對(duì)文件進(jìn)行格式化的插件;
為了完成第二個(gè)目的,格式化插件有ESlint等對(duì)文件進(jìn)行代碼檢驗(yàn)的插件。
代碼格式化的注意事項(xiàng):
插件作用
首先明白格式化插件分別側(cè)重格式化哪些文件,因?yàn)椴煌奈募胁煌母袷揭?guī)范。
prettyhtml格式化HTML;
prettier格式化css/less/scss/postcss/ts;
stylus-supremacy格式化stylus;
vscode自帶格式化插件格式化js;
vetur格式化.vue文件;讓不同塊使用不同的格式化方案
ESlint:新版的ESlint支持了對(duì).vue文件的校驗(yàn)。
符合代碼檢驗(yàn)
然后注意讓格式化的代碼符號(hào)ESlint代碼檢驗(yàn)。
格式化代碼最重要的是兩點(diǎn),一點(diǎn)是用格式化插件格式化對(duì)應(yīng)的文件;另一點(diǎn)是讓格式化后的代碼能通過(guò)代碼檢驗(yàn)工具。
舉個(gè)例子。
Prettier插件不支持在函數(shù)名后面加上括號(hào)。這點(diǎn)和ESlint沖突了。所以js的格式化不能使用prettier插件格式化,而是使用vscode自帶的js格式化功能來(lái)格式化。否則ESlint就是報(bào)錯(cuò),簡(jiǎn)直煩死強(qiáng)迫癥。
插件更新
最后要注意插件的是插件不斷更新的,所以網(wǎng)上直接copy的格式化代碼會(huì)各種不兼容。
如vscode 的 ESLint 插件在某個(gè)版本已經(jīng)移除了 "eslint.validate" 這個(gè)配置選項(xiàng),而網(wǎng)上很多教程都是使用的這個(gè)。
在新版的 ESLint 中已經(jīng)支持了對(duì) *.vue 文件的校驗(yàn),所以無(wú)需再進(jìn)行這項(xiàng)配置了,只需要添加一個(gè)保存時(shí)自動(dòng)修復(fù) ESLint 錯(cuò)誤的功能就行了。
代碼格式化插件的官方文檔:
語(yǔ)言介紹
pug:官方文檔 。pug是一款專門(mén)為node.js平臺(tái)開(kāi)發(fā)的HTML模塊引擎。
less:官方文檔。less是一門(mén)CSS預(yù)處理語(yǔ)言。
scss:官方文檔。scss(sass)是世界上最成熟、穩(wěn)定強(qiáng)大的專業(yè)級(jí)CSS預(yù)處理語(yǔ)言。
postcss:官方文檔。postcss是使用js插件來(lái)轉(zhuǎn)換CSS的工具。
stylus:官方文檔。stylus是node.js平臺(tái)上的CSS預(yù)處理框架。
插件介紹
vetur:官方文檔。代碼高亮、emmet語(yǔ)法支持、語(yǔ)法錯(cuò)誤校驗(yàn)檢查、代碼提醒、格式化vue。
vetur集成了prettier,讓.vue文件中不同的塊使用不同的格式化方案,template標(biāo)簽調(diào)用 html 格式化工具,script標(biāo)簽調(diào)用 JavaScript 格式化工具,style標(biāo)簽使用style格式化工具。
ESlint:官方文檔。代碼檢驗(yàn)。
prettyhtml:官方文檔。為vue或純HTML模板等提供通用格式化的工具。
pretties:官方文檔。代碼格式化工具,能夠解析代碼,使用用戶設(shè)定的規(guī)則格式化規(guī)范的代碼。
stylus-supremacy:官方文檔。用于格式化stylus文件的node.js模塊。
我的settings.json文件
{
/*格式化文件對(duì)應(yīng)插件:
主要是兩步,一步是用格式化插件格式化對(duì)應(yīng)的文件;
另一步讓格式化后的代碼能通過(guò)代碼檢驗(yàn)工具。
prettyhtml格式化HTML;prettier格式化css/less/scss/postcss/ts;
stylus-supremacy格式化stylus;
vscode自帶格式化插件格式化js;
vetur格式化.vue文件;
ESlint進(jìn)行代碼檢驗(yàn)。
*/
/*格式化思路和注意事項(xiàng)。
注意格式化的代碼能符合ESlint代碼檢驗(yàn)。
1.用vetur設(shè)置默認(rèn)格式化工具。格式化.vue文件
2.用ESlint設(shè)置保存時(shí)修復(fù)ESlint錯(cuò)誤的功能。
3.用prettier格式化css;去除語(yǔ)法結(jié)尾的分號(hào),使用單引號(hào)替換雙引號(hào)。
4.保存時(shí)自動(dòng)格式化。
*/
// 默認(rèn)使用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語(yǔ)句的分號(hào)
"javascript.format.semicolons": "remove",
// 在函數(shù)名后面加上括號(hào),類似這種形式 foo () {}
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// eslint配置項(xiàng),保存時(shí)自動(dòng)修復(fù)錯(cuò)誤。
"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的設(shè)置在這里
"wrap_attributes": "force-aligned"
},
" prettyhtml": {
"printWidth'": 100, // 每一行不超過(guò)100個(gè)字符
"singleQuote": false, // 不用單引號(hào)
"wrapAttributes": false,
"sortAttributes": true
},
"prettier": {
// 去掉代碼結(jié)尾的分號(hào)
"semi": false, //不加分號(hào)
"singleQuote": true, //用單引號(hào)
// #讓prettier使用eslint的代碼格式進(jìn)行校驗(yàn)
"eslintIntegration": true,
"arrowParens": "always"
}
},
// vscode默認(rèn)啟用了根據(jù)文件類型自動(dòng)設(shè)置tabsize的選項(xiàng)
"editor.detectIndentation": false,
// 重新設(shè)定tabsize
"editor.tabSize": 2,
// 保存時(shí)自動(dòng)格式化代碼
"editor.formatOnSave": true,
//可選項(xiàng)。stylus的格式化配置以及sass格式化配置。
// 格式化stylus, 需安裝Manta's Stylus Supremacy插件
"stylusSupremacy.insertBraces": false, // 是否插入大括號(hào)
"stylusSupremacy.insertColons": false, // 是否插入冒號(hào)
"stylusSupremacy.insertSemicolons": false, // 是否插入分號(hào)
"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否換行
"stylusSupremacy.insertNewLineAroundBlocks": false,
// 啟用調(diào)試模式。
"sass.format.debug": false,
// 刪除空格
"sass.format.deleteEmptyRows": true,
// 刪除最后一個(gè)空格。
"sass.format.deleteWhitespace": true,
// 將 scss / css 轉(zhuǎn)換為 sass。
"sass.format.convert": true,
// 如果 屬性:值 為true,則始終設(shè)置為1.
"sass.format.setPropertySpace": true
/*格式化插件:
//vetur:代碼高亮、emmet語(yǔ)法支持、語(yǔ)法錯(cuò)誤校驗(yàn)檢查、代碼提醒、格式化vue。
vetur集成了prettier,讓.vue文件中不同的塊使用不同的格式化方案,
<template> 調(diào)用 html 格式化工具,
<script> 調(diào)用 JavaScript 格式化工具,
<style> 使用style格式化工具。
//ESlint:新版的ESlint支持了對(duì).vue文件的校驗(yàn)。
//prettyhtml:為純HTML模板等提供通用格式化的工具。
//prettier:格式化工具,用于css/less/scss/postcss/ts
//stylus-supremacy:用于格式化stylus文件的node.js模塊。
//js的格式化工具用vscode自帶的。
Prettier不支持在函數(shù)名后面加上括號(hào)。這點(diǎn)和ESlint沖突了。
//EditorConfig:主要是用于讓 vscode 支持.editorconfig 文件。
.editorconfig 文件中的設(shè)置用于在基本代碼庫(kù)中維持一致的編碼風(fēng)格和設(shè)置,
例如縮進(jìn)樣式、選項(xiàng)卡寬度、行尾字符以及編碼等。
EditorConfig 是讓代碼創(chuàng)建前保持規(guī)范,
Prettier 是讓代碼保存后保持規(guī)范
*/
}
總結(jié)
到此這篇關(guān)于2020最新版vscode格式化代碼的詳細(xì)教程的文章就介紹到這了,更多相關(guān)vscode格式化代碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
文章轉(zhuǎn)自腳本之家,原文鏈接:https://www.jb51.net/article/192960.htm
申請(qǐng)創(chuàng)業(yè)報(bào)道,分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處,共同探討創(chuàng)業(yè)新機(jī)遇!