vscode利用prettire自動格式化node代碼

1.安裝eslint依賴
在package.json中用npm i xxx --save-dev安裝以下的依賴

    "eslint": "^6.4.0",
    "eslint-friendly-formatter": "^4.0.1",
    "eslint-loader": "^3.0.0",
    "eslint-plugin-html": "^6.0.0",
    "eslint-plugin-standard": "^4.0.1",
    "babel-eslint": "^10.0.3",
    "prettier": "1.19.1",

另外，在vscode裏面插件中安裝Prettier - Code formatter

2.生成eslint配置文件
在項目根目錄下建立 .eslintrc.json文件，複製下面的內容到裏面

{
    "parser": "babel-eslint",
    "env": {
        "es6": true,
        "node": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "sourceType": "script",
        "ecmaVersion": 8
    },
    "rules": {
        "no-console": 0,
        "no-unused-vars": "error",
        "linebreak-style": ["error", "unix"],
        "quotes": ["error", "single"],
        "semi": ["error", "always"],
        "curly": ["error", "all"],
        "default-case": "error",
        "no-else-return": "error",
        "no-empty-function": "error",
        "no-implicit-coercion": "error",
        "no-invalid-this": "error",
        "no-loop-func": "error",
        "no-multi-spaces": "error",
        "no-new-func": "error",
        "no-useless-return": "error",
        "no-path-concat": "error",
        "array-bracket-spacing": ["error", "never"],
        "block-spacing": ["error", "always"],
        "brace-style": ["error", "1tbs"],
        "camelcase": "error",
        "comma-dangle": ["error", "always-multiline"],
        "comma-spacing": ["error", { "before": false, "after": true }],
        "comma-style": ["error", "last"],
        "key-spacing": ["error", { "beforeColon": false, "afterColon": true }],
        "lines-around-comment": ["error", { "beforeBlockComment": true }],
        "newline-before-return": "error",
        "no-multi-assign": "error",
        "new-cap": [
            "error",
            {
                "newIsCap": true,
                "capIsNew": false
            }
        ],
        "no-multiple-empty-lines": [
            "error",
            {
                "max": 2
            }
        ],
        "no-shadow-restricted-names": "error",
        "no-undef-init": "error",
        "keyword-spacing": "error",
        "space-before-blocks": ["error", "always"]
    }
}

在項目根目錄下建立 .editorconfig文件，複製下面的內容到裏面

# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 4

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab

在項目根目錄下建立 .prettierrc文件，複製下面的內容到裏面

{
    "singleQuote": true,
    "trailingComma": "es5",
    "printWidth": 100,
    "overrides": [
        {
            "files": ".prettierrc",
            "options": { "parser": "json" }
        }
    ]
}

在項目根目錄下建立 .prettierignore文件，複製下面的內容到裏面

**/*.md
**/*.svg
**/*.ejs
**/*.html
package.json

3.自動格式化設置
1、window電腦：

文件 > 首選項 > 設置    點擊右上角按鈕打開 VSCode 配置文件,如下圖

2、mac電腦

code>首選項 >設置   點擊右上角按鈕打開 VSCode 配置文件,如下圖

可以複製我的設置，覆蓋setting.json文件裏到配置，如下：

{
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "[javascript]": {
      "editor.formatOnSave": true
    },
  
    // 使用單引號替代雙引號 
    "prettier.singleQuote": true,
    "diffEditor.ignoreTrimWhitespace": false,
   
  }

這樣，你就可以保存自動按照配置格式化代碼。

參考文章

vscode保存代碼，自動按照eslint規範格式化代碼設置

vscode保存代碼,自動格式化代碼設置方法

react eslint