分享一下在vscode中写前端代码的插件和setting.json的配置

最新推荐文章于 2025-10-07 13:59:34 发布

原创最新推荐文章于 2025-10-07 13:59:34 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vscode #vue #前端

本文介绍了如何在Visual Studio Code(VSCode)中配置自动格式化，包括设置编辑器字体大小、开启保存时自动修复ESLint问题、设置HTML、JavaScript等语言的格式化器，以及调整缩进、分号、引号等格式规范。通过这些配置，开发者可以在编写代码时实现按指定风格自动格式化，提升代码质量与一致性。

这是我下载的插件，大家可以参考一下

接下来是在setting.json中的配置：

首先按cirl+shift+p,输入open setting

点击进入，将下面代码复制代替原代码

{
    "editor.fontSize": 16,
    "eslint.autoFixOnSave": true,
    "fileheader.LastModifiedBy": "xudanfeng",
    "fileheader.Author": "xudanfeng",
    "git.autofetch": true,
    "[html]": {
      "editor.defaultFormatter": "HookyQR.beautify"
    },
    "editor.detectIndentation": false,
    "editor.formatOnSave": true,
    "editor.formatOnPaste": true,
    "vetur.validation.template": false, // 标签报错
    // 添加 vue 支持
    "eslint.validate": [
      {
        "language": "vue",
        "autoFix": true
      },
      {
        "language": "html",
        "autoFix": true
      },
      {
        "language": "javascript",
        "autoFix": true
      },
      {
        "language": "typescript",
        "autoFix": true
      },
    ],
    // "prettier.eslintIntegration": true,
    // //  #去掉代码结尾的分号 
    "prettier.semi": false,
    // //  #使用带引号替代双引号 
    // "prettier.singleQuote": true,
    //  #让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    // 保存缩进空格2
    "editor.tabSize": 2,
    // #这个按用户自身习惯选择 
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    // #让vue中的js按编辑器自带的ts格式进行格式化 
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatterOptions": {
      "prettier": {
        "semi": false
      },
      "js-beautify-html": {
        "wrap_attributes": "auto"
        // #vue组件中html代码格式化样式
        // - auto: 仅在超出行长度时才对属性进行换行。
        // - force: 对除第一个属性外的其他每个属性进行换行。
        // - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐。
        // - force-expand-multiline: 对每个属性进行换行。
        // - aligned-multiple: 当超出折行长度时，将属性进行垂直对齐。
      }
    },
    // 格式化stylus, 需安装Manta's Stylus Supremacy插件
    // "stylusSupremacy.insertColons": false, // 是否插入冒号
    // "stylusSupremacy.insertSemicolons": false, // 是否插入分好
    // "stylusSupremacy.insertBraces": false, // 是否插入大括号
    // "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
    // "stylusSupremacy.insertNewLineAroundBlocks": false,
    "typescript.format.insertSpaceAfterSemicolonInForStatements": false,
    "workbench.colorTheme": "Monokai Dimmed",
    "window.zoomLevel": 0,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "files.autoSaveDelay": 100, // 两个选择器中是否换行
    // 之前使用的是syntaxProfiles
    // 新版Emmet中syntaxProfiles应该只用来决定最后输出
    // 而给其他文件类型添加支持应该要放到新的配置项includeLanguages里
    "emmet.includeLanguages": {
      "vue-html": "html",
      "vue": "html",
      "wxml": "html"
    },
    "files.associations": {
      "*.cjson": "jsonc",
      "*.wxss": "css",
      "*.wxs": "javascript",
      "*.vue": "vue"
    },
    "minapp-vscode.disableAutoConfig": true
  }

接下来，在编写的过程中，按保存，会自动格式化代码啦