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

Posted zhuangwei_8256

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VS Code 分享常用的插件配置setting.json(prettier格式化代码,vetur的配置,编辑器工作区的配置代码的蓝色波浪线的问题等)相关的知识,希望对你有一定的参考价值。

本文中已安装的插件:

  • 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



如有不足,望大家多多指点! 谢谢!

以上是关于VS Code 分享常用的插件配置setting.json(prettier格式化代码,vetur的配置,编辑器工作区的配置代码的蓝色波浪线的问题等)的主要内容,如果未能解决你的问题,请参考以下文章

VS code的插件安装

vs code远程开发的配置

vs code远程开发的配置

VS Code环境配置Vue篇

Vs code常用插件

vs code常用插件