33 个提高前端工作效率的 VSCode 实用插件

1.安装 Prettier - Code formatter 、 beautify、插件

2.生成 .prettierrc 文件

3.配置 .prettierrc 文件

{
  "printWidth": 100,    
  "singleQuote": true,
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "htmlWhitespaceSensitivity": "ignore",
  "useTabs": false,
  "tabWidth": 2,
  "endOfLine": "lf",
  "trailingComma": "none",
  "semi": true,
  "eslintIntegration": true
}

4.在settion.json中这样配置

{
    "files.associations": {
        "*.cjson": "jsonc",
        "*.wxss": "css",
        "*.wxs": "javascript",
        "*.vue": "vue"
    },
    "emmet.includeLanguages": {
        "wxml": "html"
    },
    "minapp-vscode.disableAutoConfig": true,
    "editor.fontWeight": "500",
    "editor.formatOnSave": true,
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "vsicons.dontShowNewVersionMessage": true,
    "javascript.updateImportsOnFileMove.enabled": "always",
    "cssrem.rootFontSize": 100,
    "bracketPairColorizer.activeScopeCSS": [
        "borderStyle : solid",
        "borderWidth : 5px",
        "borderColor : {color}; opacity: 1"
    ],
    "better-comments.tags": [
        {
            "tag": "!",
            "color": "#FF2D00",
            "strikethrough": false,
            "underline": false,
            "backgroundColor": "transparent",
            "bold": false,
            "italic": false
        },
        {
            "tag": "?",
            "color": "#3498DB",
            "strikethrough": false,
            "underline": false,
            "backgroundColor": "transparent",
            "bold": false,
            "italic": false
        },
        {
            "tag": "//",
            "color": "#474747",
            "strikethrough": true,
            "underline": false,
            "backgroundColor": "transparent",
            "bold": false,
            "italic": false
        },
        {
            "tag": "todo",
            "color": "#FF8C00",
            "strikethrough": false,
            "underline": false,
            "backgroundColor": "transparent",
            "bold": false,
            "italic": false
        },
        {
            "tag": "*",
            "color": "#98C379",
            "strikethrough": false,
            "underline": false,
            "backgroundColor": "transparent",
            "bold": false,
            "italic": false
        }
    ],
    "editor.tabSize": 2,
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "workbench.colorTheme": "Atom One Dark",
    "workbench.iconTheme": "material-icon-theme",
    "workbench.tree.indent": 16,

    "prettier.singleQuote": true,
    "prettier.semi": true,
    "prettier.jsxSingleQuote": true,
    "prettier.trailingComma": "none",
    "prettier.printWidth": 300,
    "prettier.jsxBracketSameLine": false,
    "editor.fontFamily": "Operator Mono",
    "editor.fontLigatures": false,
    "liveServer.settings.donotShowInfoMsg": true,
    "material-icon-theme.hidesExplorerArrows": true,
    "terminal.integrated.fontFamily": "Operator Mono",//monospace
    "terminal.integrated.fontSize": 15,
    "terminal.integrated.lineHeight": 1.2,
    "terminal.integrated.letterSpacing": 0.1,
    "terminal.integrated.cursorBlinking": true,
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
          "semi": true,
          "singleQuote": true,
          "trailingComma": "none",
          "printWidth": 100,
          "eslintIntegration": true,
        },
        "js-beautify-html": {
            "wrap_attributes": "auto",  //force-aligned" 
            "wrap_line_length": 100,
            "end_with_newline": false
        },
    },
    "eslint.run": "onSave",
    //保存时eslint自动修复错误
    "files.autoSave": "afterDelay",
    "editor.fontSize": 15,
    "editor.wordWrapColumn": 100,
    "prettier.bracketSpacing": true,
    "bracketPairColorizer.depreciation-notice": false,
    "diffEditor.ignoreTrimWhitespace": false

    // "editor.tokenColorCustomizations": {
    //     "textMateRules": [
    //         {
    //             "name": "italic font",
    //             "scope": [
    //                 "comment",
    //                 "keyword",
    //                 "storage",
    //                 "keyword.control.import",
    //                 "keyword.control.default",
    //                 "keyword.control.from",
    //                 "keyword.operator.new",
    //                 "keyword.control.export",
    //                 "keyword.control.flow",
    //                 "storage.type.class",
    //                 "storage.type.function",
    //                 "storage.type",
    //                 "storage.type.class",
    //                 "variable.language",
    //                 "variable.language.super",
    //                 "variable.language.this",
    //                 "meta.class",
    //                 "meta.var.expr",
    //                 "constant.language.null",
    //                 "support.type.primitive",
    //                 "entity.name.method.js",
    //                 "entity.other.attribute-name",
    //                 "punctuation.definition.comment",
    //                 "text.html.basic entity.other.attribute-name.html",
    //                 "text.html.basic entity.other.attribute-name",
    //                 "tag.decorator.js entity.name.tag.js",
    //                 "tag.decorator.js punctuation.definition.tag.js",
    //                 "source.js constant.other.object.key.js string.unquoted.label.js",
    //             ],
    //             "settings": {
    //                 "fontStyle": "italic",
    //             }
    //         },
    //     ]
    // },


}

4.下载Operator Mono 字体可查看

为VSCode 设置好看的字体：Operator Mono_浮沉半生的博客-CSDN博客_vscode 字体设置