VS Code 自動修改和保存代碼風格 == eslint+prettier

時間 2019-12-08

標籤 code 自動修改保存代碼風格 eslint+prettier eslint prettier 简体版

原文原文鏈接

最近由於用到VS Code，須要統一全部人的代碼風格（前端語言js/html/css等，或者後端語言 go/python等也能夠這麼用）。javascript

因此參考了一些網絡資料，記錄下設置步驟，以便後續查閱。css

Step 1: npm 命令窗口，安裝須要的插件html

cmd >> npm i -D prettier前端

# eslint-plugin-prettier插件會調用prettier對你的代碼風格進行檢查，其原理是先使用prettier對你的代碼進行格式化，vue

# 而後與格式化以前的代碼進行對比，若是過出現了不一致，這個地方就會被prettier進行標記。java

cmd >> npm i -D eslint-plugin-prettiernode

# eslint-config-prettier能夠關閉eslint可能與prettier發生衝突的代碼格式化規則。python

# 官方稱eslint-plugin-prettier須要與eslint-config-prettier搭配食用才能得到最佳效果。react

cmd >> npm i -D eslint-config-prettieres6

Step 2: 建立react項目

cmd >> cd H:\0_VSCode_Work

cmd >> create-react-app my-app-03

# 打開項目

cmd >> cd ./my-app-03

cmd >> code .

Step 3: 建立項目的.eslintignore文件

# 文件路徑 = MY-APP-03/.eslintignore

# 在vs code中手動建立文件後".eslintignore"，輸入以下文件內容。

/build/
/config/
/dist/
/*.js
/test/unit/coverage/

Step 4: 建立項目的.eslintrc.js文件

# 文件路徑 = MY-APP-03/src/.eslintrc.js

# 在vs code中手動建立文件後".eslintrc.js"，輸入以下文件內容。

module.exports = {
    root: true,
    env: {
        browser: true,
        es6: true,
        node: true
    },
    extends: [
        'standard',
        'plugin:vue/essential',
        'eslint:recommended',
        "plugin:prettier/recommended"
    ],
    rules: {
        "prettier/prettier": "error",
        // allow async-await
        'generator-star-spacing': 'off',
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        // allow debugger during development
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        //強制使用單引號
        quotes: ['error', 'single'],
        //強制不使用分號結尾
        semi: ['error', 'never']
    },
    parserOptions: {
        parser: 'babel-eslint'
    }
}

Step 5: 建立項目的.prettierrc文件

# 文件路徑 = MY-APP-03/.prettierrc

# 在vs code中手動建立文件後".prettierrc"，輸入以下文件內容。

{
  //一行的字符數，若是超過會進行換行，默認爲80
  "printWidth": 80, 
  //一個tab表明幾個空格數，默認爲80
  "tabWidth": 2, 
  //是否使用tab進行縮進，默認爲false，表示用空格進行縮減
  "useTabs": false, 
  //字符串是否使用單引號，默認爲false，使用雙引號
  "singleQuote": false, 
  //行位是否使用分號，默認爲true
  "semi": true, 
  //是否使用尾逗號，有三個可選值"<none|es5|all>"
  "trailingComma": "none", 
  //對象大括號直接是否有空格，默認爲true，效果：{ foo: bar }
  "bracketSpacing": true, 
  //代碼的解析引擎，默認爲babylon，與babel相同
  "parser": "babylon", 

  //開啓 eslint 支持
  "eslintIntegration": true
}

Step6 : 修改項目工做區設置文件.vscode/settings.json

# 單擊IDE工具的左下角的齒輪，而後單擊菜單"Settings", 在彈出的面板Settings中，選擇子面板"Workspace"，以下圖

# 而後，找到參數"Files:Associations"，單擊按鈕"Edit in setting.json"

# 而後，在settings.json文件中，輸入和保存以下內容。

{
    //.vue文件template格式化支持，並使用js-beautify-html插件
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    //js-beautify-html格式化配置，屬性強制換行
    "vetur.format.defaultFormatterOptions": {
      "js-beautify-html": {
        "wrap_attributes": "force-aligned"
      }
    },
    //根據文件後綴名定義vue文件類型
    "files.associations": {
      "*.vue": "vue"
    },
    //配置 ESLint 檢查的文件類型
    "eslint.validate": [
      "javascript",
      "javascriptreact",
      {
        "language": "vue",
        "autoFix": true
      }
    ],
    //保存時eslint自動修復錯誤
    "eslint.autoFixOnSave": true,
    //保存自動格式化
    "editor.formatOnSave": true
}

或者，少設置一些參數，以下

最後，記得保存settings.json文件

Step7 : 最後，咱們測試一下效果

# 首先，建立一個demo.html文件，以下

文件路徑 = MY-APP-03/public/demo.html

<html>dafs 
     <header>
demo
                </header>
                <body>
                    <div>亂寫一氣，----001
 </div>
                                     <div>亂寫一氣，----002
    </div>
                               </body>
   </html>