快捷導(dǎo)航

vscode使用Prettier Code插件的詳細(xì)教程

更新時(shí)間：2021年09月07日 11:27:07 作者：Famigilstimo

這篇文章主要介紹了vscode使用Prettier Code插件的詳細(xì)教程,本文通過(guò)圖文實(shí)例相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

為什么要使用prettier？

在大公司，前端開(kāi)發(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è)文件格式化的范圍是文件的全部?jī)?nèi)容
    rangeStart: 0,
    rangeEnd: Infinity,
    // 不需要寫文件開(kāi)頭的 @prettier
    requirePragma: false,
    // 不需要自動(dòng)在文件開(kāi)頭插入 @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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: