vscode使用Prettier Code插件的詳細(xì)教程
為什么要使用prettier?
在大公司,前端開發(fā)的代碼可能會(huì)有自己的代碼規(guī)范,如果快速生成自己的代碼規(guī)范呢?使用Prettier是一個(gè)比較好的選擇!
如何安裝Prettier Code插件?

在側(cè)邊欄最后一個(gè)選項(xiàng),在搜索欄中搜索Prettier Code,然后安裝即可。
項(xiàng)目中如何配置
在你新建的項(xiàng)目中,新建兩個(gè)配置文件即可,一個(gè)是.prettierignore文件,這個(gè)文件的作用類似于.gitignore文件,為了忽略哪些文件;另外一個(gè)是.prettierrc.js文件,這個(gè)文件是配置你的代碼校驗(yàn)規(guī)則。
.prettierignore配置如下
**/*.md **/*.svg **/*.ejs **/*.html package.json .umi .umi-production .umi-test
.prettierrc.js配置如下
module.exports = {
// 一行最多 100 字符
printWidth: 100,
// 使用 2 個(gè)空格縮進(jìn)
tabWidth: 2,
// 不使用縮進(jìn)符,而使用空格
useTabs: false,
// 行尾需要有分號(hào)
semi: true,
// 使用單引號(hào)
singleQuote: true,
// 對(duì)象的 key 僅在必要時(shí)用引號(hào)
quoteProps: 'as-needed',
// jsx 不使用單引號(hào),而使用雙引號(hào)
jsxSingleQuote: false,
// 末尾不需要逗號(hào)
trailingComma: 'all',
// 大括號(hào)內(nèi)的首尾需要空格
bracketSpacing: true,
// jsx 標(biāo)簽的反尖括號(hào)需要換行
jsxBracketSameLine: false,
// 箭頭函數(shù),只有一個(gè)參數(shù)的時(shí)候,也需要括號(hào)
arrowParens: 'always',
// 每個(gè)文件格式化的范圍是文件的全部內(nèi)容
rangeStart: 0,
rangeEnd: Infinity,
// 不需要寫文件開頭的 @prettier
requirePragma: false,
// 不需要自動(dòng)在文件開頭插入 @prettier
insertPragma: false,
// 使用默認(rèn)的折行標(biāo)準(zhǔn)
proseWrap: 'preserve',
// 根據(jù)顯示樣式?jīng)Q定 html 要不要折行
htmlWhitespaceSensitivity: 'css',
// 換行符使用 lf
endOfLine: 'auto',
};
這樣所有配置就完成了,等你每次編寫代碼后,點(diǎn)擊右鍵選擇格式化文檔即可
到此這篇關(guān)于vscode使用Prettier Code插件的詳細(xì)教程的文章就介紹到這了,更多相關(guān)vscode使用Prettier Code內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
用js寫了一個(gè)類似php的print_r輸出換行功能
因?yàn)閜hp的print_r比較好用同時(shí)js卻沒有這個(gè)功能于是自己就寫了一個(gè),感興趣的你可不要錯(cuò)過了哈,希望本文對(duì)你提高知識(shí)有所幫助2013-02-02
前端音頻可視化Web?Audio實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了前端音頻可視化Web?Audio實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03
JS實(shí)現(xiàn)動(dòng)態(tài)無縫輪播
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)動(dòng)態(tài)無縫輪播,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-01-01
js獲取當(dāng)前年月日-YYYYmmDD格式的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄猨s獲取當(dāng)前年月日-YYYYmmDD格式的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
網(wǎng)頁禁用右鍵實(shí)現(xiàn)代碼(JavaScript代碼)
網(wǎng)頁禁用右鍵的代碼,我們可以不少網(wǎng)站在使用,讓別人復(fù)制什么的麻煩,但破解方法也比較簡(jiǎn)單。這里就不說了,如果想知道的可以參考腳本之家以前發(fā)布的文章。2009-10-10
淺析基于WEB前端頁面的頁面內(nèi)容搜索的實(shí)現(xiàn)思路
本文主要是想實(shí)現(xiàn)瀏覽器的CTRL+F功能,提供個(gè)思路和代碼,需要的朋友可以參考下2014-06-06
JS實(shí)現(xiàn)“隱藏與顯示”功能(多種方法)
這篇文章主要介紹了JS實(shí)現(xiàn)“隱藏與顯示”功能的多種方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-11-11

