5分鐘學會用 ESLint+Prettier 統一前端程式碼風格

咳咳咳噠噠噠發表於2019-02-15
EsLint前端

開篇：在多人合作的時候，程式碼風格不統一往往是很讓人頭痛的一件事，此文旨在用最精簡的話語，讓你學會如何運用ESLint+Prettier 統一前端程式碼風格。

step 1 ---- 安裝並初始化ESLint

npm install eslint --save-dev
複製程式碼
eslint --init
複製程式碼
啟用 standard 程式碼編寫風格，並安裝 standard
npm install eslint-plugin-standard --save-dev 
複製程式碼

step 2 ---- 安裝 Prettier 並配置 .eslintrc.js

npm install --save-dev eslint-plugin-prettier eslint-config-prettier prettier-eslint-cli
複製程式碼
.eslintrc.js 檔案配置如下:
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/essential',
    'plugin:prettier/recommended',
    '@vue/standard',
  ],

  parserOptions: {
    parser: 'babel-eslint',
  },

  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    //強制使用單引號
    quotes: ['error', 'single'],
    //強制不使用分號結尾
    semi: ['error', 'never'],
    // 關閉衝突規則
    'prettier/prettier': [
      'error',
      {
        singleQuote: true,
        trailingComma: 'none',
        bracketSpacing: true,
        jsxBracketSameLine: true,
        parser: 'flow',
      },
    ],
  },
};
複製程式碼

step 3 ---- 設定 VScode ESLint 擴充套件

安裝 VScode ESlint 外掛

image

檔案 --> 首選項 --> 設定 ---> 擴充套件 找到ESLint，並開啟Eslint:Options下的setting.json。

注意： 使用者設定指的是所有專案將用於此設定， 工作區設定為當前專案所用的設定

拷貝如下程式碼
{
    // vscode預設啟用了根據檔案型別自動設定tabsize的選項
    "editor.detectIndentation": false,
    
    // 重新設定tabsize
    "editor.tabSize": 2,
    
    // 每次儲存的時候自動格式化
    "editor.formatOnSave": true,
    
    // 每次儲存的時候將程式碼按eslint格式進行修復
    "eslint.autoFixOnSave": true,
    "extensions.ignoreRecommendations": true,
    
    // 讓prettier使用eslint的程式碼格式進行校驗
    "prettier.eslintIntegration": true,
    
    // 去掉程式碼結尾的分號
     "prettier.semi": false,
    
    // 使用單引號替代雙引號
    "prettier.singleQuote": true,
    
    // 新增 vue 支援
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    
    // 使用單引號替代雙引號
    "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
    
    // 程式碼美化選擇
    // "vetur.format.defaultFormatter.html": "js-beautify-html",
    
    // 讓vue中的js按編輯器自帶的ts格式進行格式化
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    
    // vue元件中html程式碼格式化樣式
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-aligned"
        }
    },
    
    
    // 格式化beautify配置 ##使用者自己選擇,本次用的是 prettier
    "beautify.language": {
        "js": {
            "type": [
                "javascript",
                "json",
                "jsonc"
            ],
            "filename": [
                ".jshintrc",
                ".jsbeautifyrc"
            ]
        },
        "css": [
            "css",
            "scss"
        ],
        "html": [
            "htm",
            "html",
            "vue"
        ]
    },
}
複製程式碼
儲存後重啟VScode客戶端， 然後按 Shift+Alt+f 既可以格式化程式碼。

注意： 此文的一些說明，不做過多的贅述，請大家科學上網，教程比較詳細。

相關文章