前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vscode-前端插件

vscode-前端插件

作者头像
全栈程序员站长
发布2022-09-17 10:01:24
1.7K0
发布2022-09-17 10:01:24
举报
文章被收录于专栏:全栈程序员必看

大家好,又见面了,我是你们的朋友全栈君。

vscode

通用插件

中文

chinese

主题

atom one dark theme 或者 Dracula Official

标签主题

Material Icon Theme

格式化

beautify

给括号加上不同的颜色, 方便区分代码块

Bracket Pair Colorizer

本地文件修改历史

Local History

单词拼写检查

Code Spell Checker 单词拼写检查,单词拼写提示,单词拼写错误后会有提示

git

历史提交记录

git history

GitLens

方便查看git日志,git重度使用者必备

使用教程: https://www.jianshu.com/p/a91cb8a2e55d

前端插件

自动闭合HTML/XML标签

Auto Close Tag

高亮

Babel JavaScript

自动完成另一侧标签的同步修改

Auto Rename Tag

通过css选择器快速跳至css文件

CSS Peek 通过css选择器快速跳至css文件(Cmd+鼠标单击/Ctrl+鼠标单击);悬停css选择器预览css定义(Cmd+鼠标悬浮/Ctrl+鼠标悬浮)

open in browser

vscode不像IDE一样能够直接在浏览器中打开html,而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件,支持自定义打开指定的浏览器,包括:Firefox,Chrome,Opera,IE以及Safari 配置默认值:

“open-in-browser.default”: “google chrome”

括号加上不同的颜色

Bracket Pair Colorizer 给括号加上不同的颜色,便于区分不同的区块,使用者可以定义不同括号类型和不同颜色

Debugger for Chrome

映射vscode上的断点到chrome上,方便调试 调试方式

ESLint

js语法纠错,可以自定义配置,不过配置较为复杂,建议使用网上一些广泛使用的eslint配置

智能提示CSS类名以及id

HTML CSS Support

智能提示HTML标签,以及标签含义

HTML Snippets

JavaScript(ES6) code snippets

ES6语法智能提示,以及快速输入,不仅仅支持.js,还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间

jQuery代码智能提示

jQuery Code Snippets

自动提示文件路径

Path Intellisense 支持各种快速引入文件

React/Redux/react-router语法智能提示

React/Redux/react-router Snippets

React-Native/React/Redux snippets for es6/es7

react-beautify

格式化 javascript, JSX, typescript, TSX 文件

智能提示HTML class =“”属性

Class autocomplete for HTML

智能提示 css 的 class 名

IntelliSense for CSS class names

require 时的包提示(node必备)

Npm Intellisense

Vetur (推荐)(vue必备)

Vue多功能集成插件,包括:语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger。vscode官方钦定Vue插件,Vue开发者必备。

VueHelper

vue代码片段

Vue TypeScript Snippets

vue的 typescript 代码片段

Vue 2 Snippets

vue 2代码片段

bootstrap v3

bootstrap 3支持

java插件

java Extension Back

Lombok

如果想用jdk8, Language Support for java™ by Red Hat需要改成0.64.1一下版本

spring boot

spring boot Extension Pack

xml

.xml 文件节点提示功能

vsc-mybatis

可以跳到xml文件

python插件

python开发依赖包

python 直接装python extension pack, 包含了django

pylance

自定义配置

代码语言:javascript
复制
{ 
   
  "editor.tabSize": 2,
  "editor.fontSize": 15,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.semi": false,// 结尾没有;
   "prettier.singleQuote": true,// 单引号
  "editor.formatOnSave": true,
  "editor.lineHeight": 24,
  "editor.renderLineHighlight": "none",
  "editor.renderWhitespace": "none",
  "editor.fontFamily": "Consolas",
  "editor.cursorBlinking": "smooth",
  "editor.multiCursorModifier": "ctrlCmd",
  "editor.snippetSuggestions": "top",
  "editor.wordWrapColumn": 200,
  "editor.wordWrap": "off",
  "editor.quickSuggestions": { 
   
      "other": true,
      "comments": true,
      "strings": false
  },
  // 保存时自动格式化
  "editor.formatOnPaste": false,
  "files.trimTrailingWhitespace": true,
  "typescript.suggest.autoImports": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "javascript.suggest.autoImports": true,
  "workbench.startupEditor": "newUntitledFile",
  "workbench.colorCustomizations": { 
   
      // 设置guide线高亮颜色
      "editorIndentGuide.activeBackground": "#ff0000"
  },
  // 启用/禁用导航路径
  "breadcrumbs.enabled": true,
  // VScode 文件搜索区域配置
  "search.exclude": { 
   
      "**/dist": true,
      "**/build": true,
      "**/elehukouben": true,
      "**/.git": true,
      "**/.gitignore": true,
      "**/.svn": true,
      "**/.DS_Store": true,
      "**/.idea": true,
      "**/.vscode": false,
      "**/yarn.lock": true,
      "**/tmp": true
  },
  // 配置文件关联
  "files.associations": { 
   
      "*.vue": "html",
      "*.wxss": "css",
      "*.cjson": "jsonc",
      "*.wxs": "javascript"
  },
  // 配置emmet是否启用tab展开缩写
  "emmet.triggerExpansionOnTab": true,
  // 配置emmet对文件类型的支持
  "emmet.syntaxProfiles": { 
   
      "vue-html": "html",
      "vue": "html",
      "javascript": "javascriptreact",
      "xml": { 
   
          "attr_quotes": "single"
      }
  },
  // 在react的jsx中添加对emmet的支持
  "emmet.includeLanguages": { 
   
      "jsx-sublime-babel-tags": "javascriptreact",
      "wxml": "html"
  },
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": { 
   
      "wrap_attributes": "force-aligned"
  },
  // 是否开启eslint检测
  "eslint.enable": false,
  // eslint配置文件
  "eslint.options": { 
   
      "configFile": "E:/aaaworkspace/ex/experience/.eslintrc.js",
      "plugins": [
          "html",
          "vue"
      ]
  },
  "eslint.validate": [
      "javascript",
      "javascriptreact",
      "html",
      "typescript",
      "typescriptreact"
  ],
  // 格式化快捷键 shirt+alt+F
  // prettier进行格式化时是否安装eslint配置去执行,建议false
  "prettier.eslintIntegration": false,
  // 代码换行,每一行最大占有字符数
  "prettier.printWidth": 200,
  // 配置gitlen中git提交历史记录的信息显示情况
  "gitlens.advanced.messages": { 
   
      "suppressCommitHasNoPreviousCommitWarning": false,
      "suppressCommitNotFoundWarning": false,
      "suppressFileNotUnderSourceControlWarning": false,
      "suppressGitVersionWarning": false,
      "suppressLineUncommittedWarning": false,
      "suppressNoRepositoryWarning": false
  },
  // 调试,本地服务器配置
  "launch": { 
   
      "configurations": [{ 
   
              "type": "node",
              "request": "launch",
              "name": "Node.js",
              "program": "${file}"
          },
          { 
   
              "type": "chrome",
              "request": "launch",
              "name": "vuejs: chrome",
              "url": "http://localhost:8080",
              "webRoot": "${workspaceFolder}/src",
              "breakOnLoad": true,
              "sourceMapPathOverrides": { 
   
                  "webpack:///src/*": "${webRoot}/*"
              }
          }
      ],
      "compounds": []
  },
  "git.path": "C:/Program Files/Git/cmd/git.exe",
  // git是否启用自动拉取
  "git.autofetch": true,
  "git.confirmSync": false,
  "open-in-browser.default": "Google Chrome",
  "files.autoSave": "afterDelay",
  "explorer.confirmDelete": false,

}

这里有一份更详细的清单,欢迎参考

常用配置

CPU占用过高?

设置中关闭search.followSymlinks, 不然可能会引起cpu占用过高

python

  1. “python.linting.flake8Enabled”: true,方法自动补全()
  2. “python.linting.flake8Enabled”: true, python安装flake8模块后, 做这个配置, 提示代码错误及不规范

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/164346.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • vscode
  • 通用插件
    • 中文
      • 主题
        • 标签主题
          • 格式化
            • 给括号加上不同的颜色, 方便区分代码块
              • 本地文件修改历史
                • 单词拼写检查
                  • git
                    • 历史提交记录
                    • GitLens
                • 前端插件
                  • 自动闭合HTML/XML标签
                    • 高亮
                      • 自动完成另一侧标签的同步修改
                        • 通过css选择器快速跳至css文件
                          • open in browser
                            • 括号加上不同的颜色
                              • Debugger for Chrome
                                • ESLint
                                  • 智能提示CSS类名以及id
                                    • 智能提示HTML标签,以及标签含义
                                      • JavaScript(ES6) code snippets
                                        • jQuery代码智能提示
                                          • 自动提示文件路径
                                            • React/Redux/react-router语法智能提示
                                              • React-Native/React/Redux snippets for es6/es7
                                                • react-beautify
                                                  • 智能提示HTML class =“”属性
                                                    • 智能提示 css 的 class 名
                                                      • require 时的包提示(node必备)
                                                        • Vetur (推荐)(vue必备)
                                                          • VueHelper
                                                            • Vue TypeScript Snippets
                                                              • Vue 2 Snippets
                                                                • bootstrap v3
                                                                • java插件
                                                                  • java Extension Back
                                                                    • Lombok
                                                                      • 如果想用jdk8, Language Support for java™ by Red Hat需要改成0.64.1一下版本
                                                                        • spring boot
                                                                          • xml
                                                                            • vsc-mybatis
                                                                            • python插件
                                                                              • python开发依赖包
                                                                                • pylance
                                                                                • 自定义配置
                                                                                • 常用配置
                                                                                  • CPU占用过高?
                                                                                    • python
                                                                                    领券
                                                                                    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档