vscode格式化代码适配eslint

最新推荐文章于 2023-10-11 17:15:30 发布

invincible_yj

最新推荐文章于 2023-10-11 17:15:30 发布

阅读量471

点赞数

文章标签： vscode javascript ide

本文链接：https://blog.csdn.net/invincible_yj/article/details/129820445

版权

在VSCode中，通过打开命令面板，设置settings.json并添加特定配置，可以实现代码格式化以适配ESlint。配置涉及vetur插件的选项，包括tabSize、useTabs以及不同类型的默认格式化器。此外，启用了prettier的eslintIntegration，并设置了单引号、不加分号等格式规则。最后，使用快捷键Shift+Alt+F可进行代码格式化。

摘要由CSDN通过智能技术生成

vscode格式化代码适配eslint

1.打开命令面板（ctrl + shift + p）
2.输入settings.json
3.在json中添加如下配置

"vetur.completion.scaffoldSnippetSources": {
        "workspace": "💼",
        "user": "🗒️",
        "vetur": "✌"
    },
    // Vetur 全局设置
    "vetur.format.options.tabSize": 2,
    "vetur.format.options.useTabs": false,
    // 各类型代码默认格式化方式
    "vetur.format.defaultFormatter.html": "prettyhtml",
    "vetur.format.defaultFormatter.css": "prettier",
    "vetur.format.defaultFormatter.postcss": "prettier",
    "vetur.format.defaultFormatter.scss": "prettier",
    "vetur.format.defaultFormatter.less": "prettier",
    "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatter.ts": "prettier",
    "vetur.format.defaultFormatterOptions": {

        // for html
        "prettyhtml": {
            "tabWidth": 2,
            "wrapAttributes": false,
            "sortAttributes": false,
            "bracketSpacing": true,
            "printWidth": 50 //可以根据自己的屏幕宽度配置对应的换行宽度
        },
        // for js css
        "prettier": {
            "eslintIntegration": true,
            // 使用单引号
            "singleQuote": true,
            // 不加分号
            "semi": false,
            "tabWidth": 2,
            "printWidth": 140,
            "bracketSpacing": true,
            "useTabs": false
        }
    }