vscode使用Prettier Code插件的詳細教程

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

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

為什么要使用prettier？

在大公司，前端開發(fā)的代碼可能會有自己的代碼規(guī)范，如果快速生成自己的代碼規(guī)范呢？使用Prettier是一個比較好的選擇！

如何安裝Prettier Code插件？

在這里插入圖片描述

在側(cè)邊欄最后一個選項，在搜索欄中搜索Prettier Code,然后安裝即可。

項目中如何配置

在你新建的項目中，新建兩個配置文件即可，一個是.prettierignore文件，這個文件的作用類似于.gitignore文件，為了忽略哪些文件;另外一個是.prettierrc.js文件，這個文件是配置你的代碼校驗規(guī)則。

.prettierignore配置如下

**/*.md
**/*.svg
**/*.ejs
**/*.html
package.json
.umi
.umi-production
.umi-test

.prettierrc.js配置如下

module.exports = {
    // 一行最多 100 字符
    printWidth: 100,
    // 使用 2 個空格縮進
    tabWidth: 2,
    // 不使用縮進符，而使用空格
    useTabs: false,
    // 行尾需要有分號
    semi: true,
    // 使用單引號
    singleQuote: true,
    // 對象的 key 僅在必要時用引號
    quoteProps: 'as-needed',
    // jsx 不使用單引號，而使用雙引號
    jsxSingleQuote: false,
    // 末尾不需要逗號
    trailingComma: 'all',
    // 大括號內(nèi)的首尾需要空格
    bracketSpacing: true,
    // jsx 標(biāo)簽的反尖括號需要換行
    jsxBracketSameLine: false,
    // 箭頭函數(shù)，只有一個參數(shù)的時候，也需要括號
    arrowParens: 'always',
    // 每個文件格式化的范圍是文件的全部內(nèi)容
    rangeStart: 0,
    rangeEnd: Infinity,
    // 不需要寫文件開頭的 @prettier
    requirePragma: false,
    // 不需要自動在文件開頭插入 @prettier
    insertPragma: false,
    // 使用默認的折行標(biāo)準(zhǔn)
    proseWrap: 'preserve',
    // 根據(jù)顯示樣式?jīng)Q定 html 要不要折行
    htmlWhitespaceSensitivity: 'css',
    // 換行符使用 lf
    endOfLine: 'auto',
};

這樣所有配置就完成了，等你每次編寫代碼后，點擊右鍵選擇格式化文檔即可

到此這篇關(guān)于vscode使用Prettier Code插件的詳細教程的文章就介紹到這了,更多相關(guān)vscode使用Prettier Code內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: