VSCode里使用eslint+prettier


1、在VSCode里安装eslint和prettier

 2、在VSCode的settings.json里配置eslint和prettier的属性(打开settings.json的方式有两种: 1.点击vscode编辑器左下角的管理图标(转轴),点击【命令面板】,然后在命令面板中输入preferences:Open Settings(JSON); 2.直接通过文件打开C:\Users\【UserName】\AppData\Roaming\Code\User\settings.json;)

{
    "editor.maxTokenizationLineLength": 1e36,
    /* 开启保存时自动格式化 */
    "editor.formatOnSave": true,
    /* eslint的配置 */
    "eslint.enable": true,
    "eslint.run": "onSave",
    "eslint.options": {
        "extensions": [".js", ".vue"]
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true // 保存时自动修复
    },
    // 关闭 vscode 默认的检查工具
    "html.validate.scripts": false,
    "javascript.validate.enable": false,
    "eslint.alwaysShowStatus": true,
    "eslint.format.enable": true,
    "scss.lint.duplicateProperties": "error",
    "css.lint.duplicateProperties": "error",
    "less.lint.zeroUnits": "error",
    "eslint.validate": ["javascript", "javascriptreact", "vue-html", "vue", "html"],
    /* prettier的配置 */
    "prettier.printWidth": 120, // 超过最大值换行
    "prettier.tabWidth": 2, // 缩进字节数
    "prettier.useTabs": true, // 缩进使用tab
    "prettier.semi": false, // 句尾添加分号
    "prettier.singleQuote": true, // 使用单引号代替双引号
    "prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器(如GitHub comment)而按照markdown文本样式进行折行
    "prettier.arrowParens": "avoid", // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid:省略括号
    "prettier.bracketSpacing": true, // 在对象,数组括号与文字之间加空格 "{ foo: bar }"
    "prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto
    "prettier.htmlWhitespaceSensitivity": "ignore",
    "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
    "prettier.requireConfig": false, // Require a "prettierconfig" to format prettier
    "prettier.trailingComma": "none", // 在对象或数组最后一个元素后面是否加逗号
    /* 每种语言默认的格式化规则 */
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[scss]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}