vue-cli中eslint和prettier的配置问题

一、安装好插件

二、配置

• .eslintrc.js

module.exports = {
    root: true,
    env: {
        node: true
    },
    extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
    parserOptions: {
        parser: 'babel-eslint'
    },
    rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'space-before-function-paren': 0 // <== 这一行代码
    }
}

• .prettierrc

{
  "singleQuote": true,
  "semi": false,
  "bracketSpacing": true,
  "htmlWhitespaceSensitivity": "ignore",
  "arrowParens": "avoid"
 }
 

• 根目录新建.editorconfig

root = true

[*]
charset = utf-8
# 缩进风格为空格
indent_style = space
# 缩进大小为4
indent_size = 4
## 表示以Unix风格的换行符结尾
# end_of_line = lf
# insert_final_newline = true
# # 设为true表示会除去换行行首的任意空白字符。
# trim_trailing_whitespace = true

三、在vscode的设置里找到setting.json

{
    "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,//四格缩进
    // "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
}