Vue項目代碼格式化

在實際項目開發時，代碼的可讀性還是非常重要的，因此本文以Vue項目為例介紹代碼格式化。

 

1.VSCode 中安裝以下兩個插件：
　　prettier-Code formatter
　　ESLint

 

2.在項目根目錄下創建以下兩個文件以及一個包含 settings.json 文件的.vscode 文件夾
　　.eslintrc.js
　　.prettierrc

　　.vscode
　　　　settings.json

 

項目結構示意圖

 

 

 

3.然后在配置上述的三個文件

settings.json

{
    "editor.formatOnSave": true,//保存的時候是否自動格式化
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true//使用eslint進行修復（格式化）代碼
    },
    "eslint.validate": [
        //檢查格式化的文件類型
        "javascript",
        "javascriptreact",
        "html",
        "typescript",
        "vue",
        "less",
        "css",
        "scss"
    ],
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

 

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  plugins: ["prettier"],
  extends: ["plugin:vue/essential", "eslint:recommended", "plugin:prettier/recommended"],
  rules: {
    "no-console": "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    "prettier/prettier": "error"
  },
  globals: {
    //可以把全局的方法以及常量寫在這里並設為true，這樣通過代碼的檢驗，eg:$
    $: true,
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: "module",
    parser: "babel-eslint"
  }
};

 

.prettierrc

{
    "printWidth": 150,
    "tabWidth": 2,
    "trailingComma": "none",
    "arrowParens": "avoid",
    "endOfLine": "auto",
    "jsxBracketSameLine": false,
    "htmlWhitespaceSensitivity": "ignore",
    "semi": true,
    "singleQuote": true,
    "bracketSpacing":true
}

 

4.完成上述步驟之后，如果出現項目打不開的情況，可以看下控制台輸出的錯誤信息，大概率是一些npm的依賴包沒下，這里提供本人在實現代碼格式化時需要下載的依賴包僅供參考。

npm i eslint prettier-eslint eslint-config-prettier 　　若不能解決問題，還需各位根據自己的實際情況解決問題。  

 

5.該代碼格式化的方案可能會出現的問題：

　　一、第4點提到的npm依賴包問題。

　　二、代碼檢查過於嚴格，可能需要將全部的代碼格式化后（打開代碼，ctrl + s 保存時自動格式化代碼）沒有報錯才能運行項目。

　　三、本文提供的代碼格式化配置可能不符合實際項目要求，因此具體的代碼格式可以通過修改配置文件來實現。