如何配置所有文件类型,使其编写时的校验规则(编写时标红)和保存时自动修复(自动按照规则fix)使用的规则是同一套规则?

fezl
  • 17

如标题。

怎样使用 VSCode + VSCode插件 + 配置文件实现如题所描述的效果?

例如:

.js文件:编写时使用eslint,保存时自动使用eslint修复 ;
.css文件,编辑时使用csslint校验,保存时自动使用csslint修复。
.html文件使用...
.json文件使用...
.vue文件使用...
.vue文件里的template使用...
.vue文件里的js使用eslint...
....

以上只是举例。

以下是我目前的配置:
编辑器:VSCode
VSCode插件:ESlint + Vetur
npm包:eslint-plugin-vue + babel-eslint

配置文件:

// .editorconfig.org
root = true

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

[*.md]
trim_trailing_whitespace = false
// .setting.json

{
    "editor.codeActionsOnSave": {
        "source.fixAll": true,
        "source.fixAll.eslint": true,
    },
    "editor.formatOnSave": true,
    "vetur.format.enable": false,
    "vetur.validation.template": false,
    "vetur.validation.script": false,
    "vetur.validation.style": false,
    "[vue]": {
        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    },
    "[json]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "[javascript]": {
        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    },
    "[vue-html]": {
        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    },
    "eslint.alwaysShowStatus": true,
    "eslint.validate": [
        "javascript",
        "vue",
        "html"
    ],
    "eslint.options": {
        "extensions": [
            ".js",
            ".vue"
        ]
    },
}
// .eslintrc.js
module.exports = {
    root: true,
    env: {
        browser: true,
        node: true
    },
    parserOptions: {
        parser: 'babel-eslint'
    },
    extends: [
        'plugin:vue/vue3-recommended',
    ],
    plugins: [
        'vue',
        'html'
    ],
    // add your custom rules here
    rules: {
        indent: ['error', 4]
    }
}

该配置,目前存在的问题是,无法检测 Vue 文件中 tamplatecss 的格式问题,在保存时也不会自动修复。所以想请教下各位,如何才能度所有文件类型设置这个文件类型的一套规则,在编辑时标红和保存时自动修复都使用这一套规则。并且对于像 vue 这样的文件,可以针对 templatecss 使用这样一套规则。

回复
阅读 205
1 个回答
✓ 已被采纳
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏