资讯专栏INFORMATION COLUMN

VS Code配置及插件推荐

wpw / 1993人阅读

摘要:宋体以像素为单位控制字号。将其设置为可隐藏窗格。是否已启用自动刷新是否启用自动拉取以像素为单位控制终端的字号,这是的默认值。要求工作区使用高于版本的。

用户设置

打开 文件 > 首选项 > 用户设置(U),(忽略覆盖工作区提示)

</>复制代码

  1. {
  2. // 一个制表符等于的空格数。该设置在 `editor.detectIndentation` 启用时根据文件内容进行重写。
  3. "editor.tabSize": 2,
  4. "editor.lineHeight": 24,
  5. "editor.renderLineHighlight": "none",
  6. "editor.renderWhitespace": "none",
  7. // 控制字体系列。
  8. "editor.fontFamily": ""Fira Code", Consolas, "Courier New", monospace,"宋体"",
  9. "editor.fontLigatures": true,
  10. // 以像素为单位控制字号。
  11. "editor.fontSize": 14,
  12. "editor.cursorBlinking": "smooth",
  13. "editor.wordWrap": "on",
  14. "editor.formatOnSave": true,
  15. "editor.formatOnPaste": true,
  16. // 控制选取范围是否有圆角
  17. "editor.roundedSelection": false,
  18. // 建议小组件的字号
  19. "editor.suggestFontSize": 16,
  20. // 是否允许自定义的snippet片段提示,比如自定义的vue片段开启后就可以智能提示
  21. "editor.snippetSuggestions": "top",
  22. "editor.quickSuggestions": {
  23. "strings": true
  24. },
  25. // 执行文字相关的导航或操作时将用作文字分隔符的字符
  26. "editor.wordSeparators": "./()"":,.;<>~!@#$%^&*|+=[]{}`~?",
  27. // 在“打开的编辑器”窗格中显示的编辑器数量。将其设置为 0 可隐藏窗格。
  28. "explorer.openEditors.visible": 0,
  29. "git.path": "D:/Program Files/Git/bin/git.exe",
  30. // 是否已启用自动刷新
  31. "git.autorefresh": true,
  32. // git是否启用自动拉取
  33. "git.autofetch": false,
  34. // 以像素为单位控制终端的字号,这是 editor.fontSize 的默认值。
  35. "terminal.integrated.fontSize": 14,
  36. // 控制终端游标是否闪烁。
  37. "terminal.integrated.cursorBlinking": true,
  38. "workbench.startupEditor": "newUntitledFile",
  39. "workbench.iconTheme": "eq-material-theme-icons-palenight",
  40. "workbench.colorTheme": "Material Theme Palenight High Contrast",
  41. "materialTheme.fixIconsRunning": false,
  42. "html.suggest.angular1": false,
  43. "html.suggest.ionic": false,
  44. "files.trimTrailingWhitespace": true,
  45. // VScode 文件搜索区域配置
  46. "search.exclude": {
  47. "**/dist": true,
  48. "**/build": true,
  49. "**/elehukouben": true,
  50. "**/.git": true,
  51. "**/.gitignore": true,
  52. "**/.svn": true,
  53. "**/.DS_Store": true,
  54. "**/.idea": true,
  55. "**/.vscode": false,
  56. "**/yarn.lock": true,
  57. "**/tmp": true
  58. },
  59. // 排除文件搜索区域,比如node_modules(贴心的默认设置已经屏蔽了)
  60. "files.exclude": {
  61. "**/.idea": true,
  62. "**/yarn.lock": true,
  63. "**/tmp": true
  64. },
  65. // 配置文件关联,以便启用对应的智能提示,比如wxss使用css
  66. "files.associations": {
  67. "*.vue": "vue",
  68. "*.wxss": "css"
  69. },
  70. // 配置emmet是否启用tab展开缩写
  71. "emmet.triggerExpansionOnTab": true,
  72. // 配置emmet对文件类型的支持,比如vue后缀文件按照html文件来进行emmet扩写
  73. "emmet.syntaxProfiles": {
  74. "vue-html": "html",
  75. "vue": "html",
  76. "javascript": "javascriptreact",
  77. // xml类型文件默认都是单引号,开启对非单引号的emmet识别
  78. "xml": {
  79. "attr_quotes": "single"
  80. }
  81. },
  82. // 在react的jsx中添加对emmet的支持
  83. "emmet.includeLanguages": {
  84. "jsx-sublime-babel-tags": "javascriptreact"
  85. },
  86. // 是否开启eslint检测
  87. "eslint.enable": true,
  88. // 文件保存时,是否自动根据eslint进行格式化
  89. "eslint.autoFixOnSave": true,
  90. // eslint配置文件
  91. "eslint.options": {
  92. "plugins": [
  93. "html",
  94. "javascript",
  95. {
  96. "language": "vue",
  97. "autoFix": true
  98. },
  99. "vue"
  100. ]
  101. },
  102. // eslint能够识别的文件后缀类型
  103. "eslint.validate": [
  104. "javascript",
  105. "javascriptreact",
  106. "html",
  107. "vue",
  108. {
  109. "language": "html",
  110. "autoFix": true
  111. },
  112. "typescript",
  113. "typescriptreact"
  114. ],
  115. // 快捷键方案,使用sublime的一套快捷键
  116. "sublimeTextKeymap.promptV3Features": true,
  117. // 格式化快捷键 shirt+alt+F
  118. // prettier进行格式化时是否安装eslint配置去执行,建议false
  119. "prettier.eslintIntegration": true,
  120. //分号
  121. "prettier.semi": false,
  122. // 如果为true,将使用单引号而不是双引号
  123. "prettier.singleQuote": true,
  124. "prettier.tabWidth": 2,
  125. "prettier.useTabs": false,
  126. // vetur插件格式化使用beautify内置规则
  127. "vetur.format.defaultFormatter.html": "js-beautify-html",
  128. //函数前加空格
  129. "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  130. // 没有下边这个 上边不生效
  131. "vetur.format.defaultFormatter.js": "vscode-typescript",
  132. // 细节,配置gitlen中git提交历史记录的信息显示情况
  133. "gitlens.advanced.messages": {
  134. "suppressCommitHasNoPreviousCommitWarning": false,
  135. "suppressCommitNotFoundWarning": false,
  136. "suppressFileNotUnderSourceControlWarning": false,
  137. "suppressGitVersionWarning": false,
  138. "suppressLineUncommittedWarning": false,
  139. "suppressNoRepositoryWarning": false,
  140. "suppressResultsExplorerNotice": false,
  141. "suppressUpdateNotice": true,
  142. "suppressWelcomeNotice": false
  143. },
  144. // 对不属于任何工程的 JavaScript 文件启用或禁用 "experimentalDecorators" 设置。若有 jsconfig.json 或 tsconfig.json 文件,将覆盖此设置。要求工作区使用高于 2.3.1 版本的 TypeScript。
  145. "javascript.implicitProjectConfig.experimentalDecorators": true,
  146. "powermode.enabled": true,
  147. "powermode.presets": "flames",
  148. // 开启apicloud在vscode中的wifi真机同步
  149. "apicloud.port": "23450",
  150. // 设置apicloud在vscode中的wifi真机同步根目录
  151. "apicloud.subdirectories": "/apiclouduser",
  152. "terminal.integrated.shell.windows": "C:WindowsSystem32WindowsPowerShellv1.0powershell.exe"
  153. }
用户代码片段

打开 文件 > 首选项 > 用户代码片段 > (搜索代码语言)

HTML片段

</>复制代码

  1. {
  2. "ss": {
  3. "prefix": "ss",
  4. "body": [
  5. ""
  6. ],
  7. "description": ""
  8. },
  9. "html5": {
  10. "prefix": "html5",
  11. "body": [
  12. "",
  13. "",
  14. "",
  15. "",
  16. " ",
  17. " ",
  18. " ",
  19. " <span class="hljs-string"><span class="hljs-variable">${1:Document}</span></span>",
  20. "",
  21. "",
  22. "",
  23. " $2",
  24. "",
  25. "",
  26. ""
  27. ],
  28. "description": "HTML5"
  29. }
  30. }

JavaScript / JavaScript React

</>复制代码

  1. {
  2. "cl": {
  3. "prefix": "cl",
  4. "body": [
  5. "console.log($1)"
  6. ],
  7. "description": "console.log("")"
  8. },
  9. "dg": {
  10. "prefix": "dg",
  11. "body": [
  12. "document.getElementById($1)"
  13. ],
  14. "description": "document.getElementById(id)"
  15. },
  16. "jsdoc": {
  17. "prefix": "__",
  18. "body": [
  19. "/**",
  20. " * $1",
  21. " */"
  22. ],
  23. "description": "/** */"
  24. }
  25. }
快捷键设置

</>复制代码

  1. // 将键绑定放入此文件中以覆盖默认值
  2. [
  3. // ctrl+shift+d 复制当前行到下一行
  4. {
  5. "key": "ctrl+shift+d",
  6. "command": "editor.action.copyLinesDownAction",
  7. "when": "editorTextFocus && !editorReadonly"
  8. },
  9. // ctrl+shift+f 格式化代码
  10. {
  11. "key": "ctrl+shift+f",
  12. "command": "editor.action.formatDocument",
  13. "when": "editorHasDocumentFormattingProvider && editorTextFocus && !editorReadonly"
  14. },
  15. // alt+/ 代码提示
  16. {
  17. "key": "alt+/",
  18. "command": "editor.action.triggerSuggest",
  19. "when": "editorTextFocus"
  20. },
  21. // ctrl+shift+/ 多行注释
  22. {
  23. "key": "ctrl+shift+/",
  24. "command": "editor.action.blockComment",
  25. "when": "editorTextFocus"
  26. }
  27. ]
插件推荐

提示:VS Code自带有代码格式化功能,可以格式化HTML、CSS、JavaScript、JSON文件,格式JSX文件时需要设置缩进方式为空格·

</>复制代码

  1. Auto Close Tag (自动关闭HTML标签)
  2. Auto Rename Tag (HTML标签自动改名)
  3. Babel ES6/ES7
  4. VS Code JavaScript (ES6) snippets (ES6语法提示)
  5. Beautify css/sass/scss/less
  6. Brackets Light (主题)
  7. Complete JSDoc Tags (js文档注释提示)
  8. Git History (查看git提交记录)
  9. HTML CSS Support (HTML中提示可用的class)
  10. npm Intellisense (提示可以require的模块名称(最新版的vscode已经集成此功能))
  11. One Dark Theme (主题)
  12. Path Intellisense (路径补全)
  13. Prettier (格式化,使用标准风格,快捷键 alt+shift +F)
  14. Reactjs code snippets (reactjs代码提示)
  15. Sass
  16. SCSS IntelliSense
  17. Sublime Babel
  18. Sublime Text Keymap for VS Code (sublime键映射)
  19. VSCode Great Icons (文件图标)
  20. vscode-icons (文件图标)
  21. HTMLHint (html代码检查)
  22. HTML Snippets (超级实用且初级的 H5代码片段以及提示)
  23. Document this (js 的注释模板 (注意:新版的vscode已经原生支持,在function上输入/** tab))
  24. cssrem (将css中的px自动转换为rem.再也不用计算器了)
  25. Vetur (添加对.vue后缀文件的快速书写支持)
  26. Vue 2 Snippets (快速新建vue页面)
主题、文件图标推荐

主题我用的是:Atom One Dark Theme(theme-oceanicnext、Dracula)

文件图标我用的是:VSCode Great Icons

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/81856.html

相关文章

  • 前端(HTML css JS)开发工具常用插件推荐

    摘要:前端编程工具有很多,例如简称,,,,等等,今天给大家推荐的是是一个完全免费的软件,页面简介大方,是前端开发者最受欢迎的软件之一。 前端编程工具有很多,例如Visua...

    betacat 评论0 收藏0
  • VS Code上手与超实用插件安利

    摘要:软件跨平台支持以及,运行流畅,可谓是微软的良心之作微软有这个宇宙最强,自然也不会弱宇宙最强编辑器说到代码编辑器,我们有必要提一提还有。 原文链接:VS Code上手与超实用插件安利 工欲善其事必先利其器 Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号...

    miracledan 评论0 收藏0
  • 高效开发者是如何个性化VS Code插件配置的?

    摘要:由于本身不能个性化配置,有时可能会引起不适,但是至少保证团队成员可以轻易统一代码风格。就是将多于一个字母的合成一个字形。自从年双十一正式上线,累计处理了亿错误事件,得到了金山软件等众多知名用户的认可。 译者按: IDE是生产力的保证! 原文:Visual Studio Code Settings and Extensions for Faster JavaScript Develop...

    shenhualong 评论0 收藏0
  • 前端开发 VS Code 上手使用

    摘要:如果想配置开发工具面向前端及开发人员的配置如果想配置开发工具配置及使用技巧所谓网红编辑器,我觉得比来的更爽,因为的所有操作和插件,对于来说也就是一个插件就能无缝兼容。作为一个前端开发,开箱即用的代码编辑高亮提示都十分友好。 如果想配置 sublime 开发工具 => 面向web前端及node开发人员的vim配置 如果想配置 vim 开发工具 => sublime配置及使用技巧 所谓网红...

    Ocean 评论0 收藏0
  • VS code-前端配置_022

    摘要:前端配置简体中文插件,一般会自动识别你的环境,自动提示是否需要简体中文的语言包。使用插件将目前配置保存到上,以后只需要从上获取,就可以一次性安装插件配置信息。 VS code-前端配置 showImg(https://segmentfault.com/img/bVbuK6l?w=1224&h=999); Chinese (Simplified) Language Pack for Vi...

    cyrils 评论0 收藏0

发表评论

0条评论

wpw

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<