Vue中使用eslint和prettier格式化代碼方式

更新時間：2023年10月20日 10:05:36 作者：酷酷的橙007

這篇文章主要介紹了Vue中使用eslint和prettier格式化代碼方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

前言

使用eslint+prettier好處：

避免運(yùn)行時因格式問題報(bào)錯
方便團(tuán)隊(duì)合作，代碼風(fēng)格統(tǒng)一

建立項(xiàng)目

利用Vue-cli3建立Vue項(xiàng)目時，一定要選上Linter/Formatter，然后選擇 ESLint + Prettier

安裝vscode插件

首先在vscode中安裝如下三個插件：

eslint

vetur

prettier

配置

.eslintrc.js(根目錄下找)

注：代碼縮進(jìn)不是4個空格報(bào)錯。

.prettierrc

在文件根目錄下創(chuàng)建.prettierrc對prettier格式化進(jìn)行自定義規(guī)則設(shè)置，以下為我添加的規(guī)則

{
 /* 單引號包含字符串 */
 "singleQuote": true,
 /* 不添加末尾分號 */
 "semi": false,
 /* 在對象屬性添加空格 */
 "bracketSpacing": true,
 /* 優(yōu)化html閉合標(biāo)簽不換行的問題 */
 "htmlWhitespaceSensitivity": "ignore",
 /* 只有一個參數(shù)的箭頭函數(shù)的參數(shù)是否帶圓括號（默認(rèn)avoid） */
 "arrowParens": "avoid"
}

.editorconfig

在文件根目錄下創(chuàng)建.editorconfig，內(nèi)容如下：

root = true

[*]
charset = utf-8
# 縮進(jìn)風(fēng)格為空格
indent_style = space
# 縮進(jìn)大小為4
indent_size = 4
## 表示以Unix風(fēng)格的換行符結(jié)尾
# end_of_line = lf
# insert_final_newline = true
# # 設(shè)為true表示會除去換行行首的任意空白字符。
# trim_trailing_whitespace = true

setting.json（vscode中自帶的setting）

user setting:

{
    "git.path": "E:/Git/bin/git.exe",
    "vetur.validation.template": true,
    "git.autofetch": true,
    "editor.tabSize": 4,
    "eslint.autoFixOnSave": true,
    // "editor.detectIndentation": false,
    "vetur.format.options.tabSize": 4,//四格縮進(jìn)
    // "vetur.format.styleInitialIndent": true,
    // "vetur.format.options.useTabs": true,
    // "vetur.format.scriptInitialIndent": true,
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "auto",//屬性不換行
            "end_with_newline": false
        }
        // "prettier": {
        //     // Prettier option here
        //     "semi": false, //要分號
        //     "singleQuote": true //要單引號
        // }
    },
    "gitlens.gitExplorer.files.layout": "list",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "update.channel": "none",
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
          "language": "vue",
          "autoFix": true
        },
        "vue"
    ],
    "window.zoomLevel": 0
}