vscode技巧-eslint配置

ooxuyu

已于 2024-09-14 10:24:06 修改

阅读量668

点赞数 11

文章标签： vscode ide 编辑器

于 2024-09-14 10:23:07 首次发布

本文链接：https://blog.csdn.net/weixin_41094290/article/details/142251409

版权

开发环境

js+vue3+axios

下载插件

Eslint、Prettfier

配置过程

1.配置eslint

进入settings，输入eslint，在settings.json中替换一下文件

// #每次保存的时候自动格式化
{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "explicit"
    },
    //  #去掉代码结尾的分号
    "prettier.semi": false,
    "javascript.referencesCodeLens.enabled": true,
    "git.enabled": true,
    "[typescript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "[less]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "tslint.jsEnable": true,
    // "workbench.colorTheme": "Monokai Dimmed",
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "typescript.updateImportsOnFileMove.enabled": "always",
    "explorer.confirmDragAndDrop": false,
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "[json]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "npm.enableScriptExplorer": true,
    "editor.tabCompletion": "on",
    "prettier.singleQuote": true,
    "prettier.tabWidth": 4,
    "prettier.printWidth": 120,
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "tabWidth": 4,
            "wrap_attributes": "auto",
            "wrap-line-length": 120
        },
        "prettier": {
            "semi": true,
            "singleQuote": true
        },
        "prettyhtml": {
            "printWidth": 120,
            "singleQuote": false,
            "wrapAttributes": false,
            "sortAttributes": false
        }
    },
    "vetur.format.options.useTabs": false,
    "vetur.format.options.tabSize": 4,
    "vetur.format.scriptInitialIndent": true,
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    // 按照什么规范去格式化js, prettier/prettier-eslint 会在句末自动添加分号，但遇到then,catch等链式调用时会自动换行
    // "vetur.format.defaultFormatter.js": "js-beautify-html",
    "vetur.format.defaultFormatter.js": "vscode-typescript", // none/prettier/prettier-eslint/vscode-typescript
    "vetur.format.defaultFormatter.less": "prettier",
    "css.lint.duplicateProperties": "warning",
    "emmet.triggerExpansionOnTab": false,
    "vetur.format.styleInitialIndent": true,
    "vetur.format.defaultFormatter.css": "prettier",
    "vetur.format.defaultFormatter.postcss": "prettier",
    "vetur.format.defaultFormatter.scss": "prettier",
    "vetur.format.defaultFormatter.sass": "sass-formatter",
    "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
    "vetur.format.defaultFormatter.ts": "prettier",
    "files.associations": {
        "*.cjson": "jsonc",
        "*.wxss": "css",
        "*.wxs": "javascript",
        "*.vue": "vue",
        "*.nvue": "vue"
    },
    "emmet.includeLanguages": {
        "wxml": "html"
    },
    "minapp-vscode.disableAutoConfig": true,
    "vetur.validation.template": false,
    "task.slowProviderWarning": ["typescript"],
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "[scss]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "editor.rulers": [],
    "terminal.integrated.automationProfile.windows": null,
    "editor.renderWhitespace": "all",
    "editor.autoIndent": "advanced",
    "explorer.confirmDelete": false,
    "editor.semanticTokenColorCustomizations": {},
    "http.proxyAuthorization": null,
    "editor.detectIndentation": false,
    "editor.tabSize": 4,
    "[yaml]": {
        "editor.insertSpaces": true,
        "editor.tabSize": 2,
        "editor.autoIndent": "advanced"
    },
    "tabnine.experimentalAutoImports": true,
    "editor.formatOnSave": true,
    "eslint.codeActionsOnSave.rules": null,
    "git.confirmSync": false,
    "path-intellisense.mappings": {
        "@":"${workspaceRoot}/src"
    },
    "editor.wordWrap": "on",
    "html.format.wrapAttributes": "force-expand-multiline"
}

2.设置默认格式化configuration

右击Format Document With,配置Configure Default Formatter,选择Prettier