VS Code 分享常用的插件配置setting.json（prettier格式化代码，vetur的配置，编辑器工作区的配置代码的蓝色波浪线的问题等）

Posted 2022-05-05 zhuangwei_8256

本文中已安装的插件：

• Vetur：vue2专用插件
• Vue Language Features (Volar)：vue2专用插件（某些功能与vetur 冲突，如校验根节点是否符合规范）
• Prettier - Code formatter：美化代码格式的插件
• One Dark Pro：VS Code 主题插件
• GitLens — Git supercharged：Git插件
• Code Spell Checker：单词拼写检查插件

这些插件都是常用的插件：VS Code 常用的插件，让你的 VS Code 好用到飞起，开发必备

详情查看 setting.json，朋友们可以选择使用哪些配置，几乎都已经标明了配置是做什么用的。

setting.json：

    /*
        工作区的相关配置
    */
    "workbench.iconTheme": "vscode-icons",
    "workbench.colorCustomizations": 
        // 设置行号的字体颜色
        "editorLineNumber.foreground": "#17a346",
        // 设置光标颜色
        "editorCursor.foreground": "#fff",
        // 点中的当前行的背景色
        "editor.lineHighlightBackground": "#445",
        // 设置选中的代码片的背景色
        "editor.selectionBackground": "#666"
    ,
    "workbench.startupEditor": "none",
    "workbench.colorTheme": "One Dark Pro",

    /*
        编辑区相关配置
    */
    "editor.hover.delay": 5000, // 延迟标签介绍信息
    "editor.suggestSelection": "first",
    "editor.formatOnSave": false, // 设置为true时，每次保存的时候自动格式化；
    "editor.tabCompletion": "on",
    "editor.tabSize": 4,
    "editor.fontSize": 16,
    "editor.wordWrap": "on",
    "editor.codeActionsOnSave": 
        // 自动格式化代码：不使用，设置为true之后 tab键的某些缩进或者自动补齐标签会失效
        "source.fixAll.eslint": true
    ,
    // 鼠标双击的时候选中单词，将原有的中横线删除了，这样就可以选中中横线连接的单词了
    "editor.wordSeparators": "`~!@#$%^&*()=+[]\\\\|;:'\\",.<>/?",

    /*
        One Dark Pro 插件相关配置
    */
    "oneDarkPro.editorTheme": "One Dark Pro",
    "oneDarkPro.vivid": true,

    "emmet.triggerExpansionOnTab": true,
    // 自动填充闭合标签包括语言
    "emmet.includeLanguages": 
        "vue-html": "html",
        "vue": "html",
        "javascript": "html",
        "wxml": "html"
    ,
    // 显示缩写建议
    "emmet.showAbbreviationSuggestions": true,
    // 显示扩大缩写
    "emmet.showExpandedAbbreviation": "always",

    /**
        vscode-icons 插件相关配置
    */
    "files.associations": 
        "*.cjson": "jsonc",
        "*.wxss": "css",
        "*.wxs": "javascript"
    ,
    "files.exclude": 
        "**/.classpath": true,
        "**/.project": true,
        "**/.settings": true,
        "**/.factorypath": true
    ,

    "gitlens.advanced.messages": 
        "suppressImproperWorkspaceCasingWarning": false
    ,

    "vsicons.dontShowNewVersionMessage": true,
    "search.followSymlinks": false, // 关闭rg.exe进程
    "merge-conflict.autoNavigateNextConflict.enabled": true,
    "bracketPairColorizer.depreciation-notice": false,
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",

    // "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": true, // 括号两边加空格，包括中括号、大括号等
    // "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true, // 匿名函数后面加空格，比如箭头函数
    // "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // #让函数(名)和后面的括号之间加个空格

    /*
        vue2 插件 vetur，相关配置
    */
    // "vetur.validation.templateProps": false,
    // "vetur.validation.template": false, // 不校验 template ，vue3 支持多根节点
    "vetur.ignoreProjectWarning": true,
    "vetur.format.options.tabSize": 4, // 缩进
    "vetur.format.defaultFormatter.html": "js-beautify-html", // 设置html的格式化模板为 js-beautify-html
    "vetur.format.defaultFormatterOptions": 
        "prettier": 
            "semi": false, // 不加分号
            "arrowParens": "avoid", //  (x) =>  箭头函数参数只有一个时是否要有小括号。avoid：省略括号
            "bracketSpacing": true, // 在对象，数组括号与文字之间加空格 " foo: bar "
            "trailingComma": "es5" // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
            // "singleQuote": true  // 用单引号
        ,
        "js-beautify-html": 
            "wrap_line_length": 120, // 换行长度，当前行的代码长度超过120个字符后就会换行（受单词影响，误差2个字符左右）
            "wrap_attributes": "auto", // 换行设置自动
            "end_with_newline": false // 结尾添加新行
        
    ,

    /*
        格式化文件
        对应文件使用什么插件进行格式化代码
    */
    "[vue]": 
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    , // vue文件格式化工具
    "[javascript]": 
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    , // js文件格式化工具: 插件 Prettier - Code formatter
    "[jsonc]": 
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    ,
    "[html]": 
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    ,
    "[scss]": 
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    ,

    /*
        code spell checker 单词拼写检查插件相关配置
    */
    "cSpell.languageSettings": [],
    "cSpell.userWords": [
        // 将数组中的字段添加到 code spell checker 单词拼写检查插件的字典中去，这样在代码里面这些单词就不会有蓝色波浪线提示
        "vuex"
    ],

    /**
        插件 Prettier - Code formatter 相关配置
    */
    // 缩进
    "prettier.tabWidth": 4, 
    // 超过最大值换行
    "prettier.printWidth": 120,
    // 是否对vue文件中的 script块和 style块的缩进设置
    "prettier.vueIndentScriptAndStyle": true,
    // 句尾不添加分号
    "prettier.semi": false,
    // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
    "prettier.proseWrap": "preserve", 
    //  (x) =>  箭头函数参数只有一个时是否要有小括号。avoid：省略括号
    "prettier.arrowParens": "avoid", 
    // 在对象，数组括号与文字之间加空格 " foo: bar "
    "prettier.bracketSpacing": true, 
    // 结尾是 \\n \\r \\n\\r auto
    "prettier.endOfLine": "auto", 
    // html 空白区域的敏感度
    "prettier.htmlWhitespaceSensitivity": "ignore",
    // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
    "prettier.ignorePath": ".prettierignore", 
    // 在jsx中把'>' 是否单独放一行
    "prettier.jsxBracketSameLine": false, 
    // 是否需要 'prettierconfig' 配置文件去格式化代码
    "prettier.requireConfig": false, //
    // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
    "prettier.trailingComma": "es5",
    // 缩进不使用tab，使用空格
    // "prettier.useTabs": false, 
    // 使用单引号代替双引号
    // "prettier.singleQuote": true, 
    // 不让 prettier使用 eslint的代码格式进行校验
    // "prettier.eslintIntegration": false,
    // 不让 prettier使用 tslint的代码格式进行校验
    // "prettier.tslintIntegration": false,
    // 不让 prettier使用 stylelint的代码格式进行校验
    // "prettier.stylelintIntegration": false,
    // 在jsx中使用单引号代替双引号
    // "prettier.jsxSingleQuote": false,
    // 格式化的解析器，默认是babylon
    // "prettier.parser": "babylon",

    /*
        终端的相关设置    
    */
    // 是否允许使用菜单栏快捷键
    "terminal.integrated.allowMnemonics": true

 
 

如有不足，望大家多多指点！ 谢谢！