vscode-前端插件

vscode-前端插件文章目录AutoCloseTagAutoRenameTagBeautifyBracketPairColorizerDebuggerforChromeESLintHTMLCSSSupportHTMLSnippetsJavaScript(ES6)codesnippetsjQueryCodeSnippetsMarkdownPreviewEnhancedmarkdownlintMaterialIconThemeopeninbrowserPathIntellisenseRe

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

通用插件

中文

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

自定义配置

{ 
   
  "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.net/164346.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Unity3D 去色Shader实现[通俗易懂]

    Unity3D 去色Shader实现[通俗易懂]一般为了达到一些特殊的渲染效果会降低纹理所使用的颜色数量,不管是在后处理里实现还是对单个物体实现,思路都是差不多的。在unity里颜色值分量可以看成[0,1]的连续值,但是其实也只能取到256个值,因此可以直接把[0,1]的值无损的映射到256个格子里,然后再根据需要,对这256个格子进行一定的合并,例如[0,9]原来是10种颜色,现在用0代表的颜色代替。[10,19]用10这种颜色代替,依次类推。关键代码,_DiscreteLevel为需要用的颜色数量,我们这里使用向下取整,因此所有落在这个区间内的颜

    2022年9月27日
    3
  • java的所有版本

    java的所有版本java16与JDK15一样,JDK16将是一个短期版本,支持六个月。将于2021年9月发布的JDK17将是一个长期支持(LTS)版本,将获得数年的支持。当前的LTS版本JDK11已于2018年9月发布。JDK16预计20213月到来。java16JavaSE15JavaSE14JavaSE13JavaSE12JavaSE11JavaSE10JavaSE9JavaSE8(8u211andlater)JavaSE8(8u

    2022年7月7日
    15
  • Centos Go环境搭建「建议收藏」

    Centos Go环境搭建「建议收藏」标准官网:https://golang.org/需要墙镜像官网:https://golang.google.cn/dl/【国内推荐】1、下载文件wgethttps://golang.google.cn/dl/go1.14.7.linux-amd64.tar.gz2、解压文件到/usr/local如果之前已经安装过go的版本,先清空下go下面src,不然可能会报一些previousdeclarationat/usr/local/go/src/runtime/internal/atom

    2022年10月12日
    3
  • 素埃里克森筛法

    素埃里克森筛法

    2021年12月17日
    43
  • docker 开放 2375端口

    docker 开放 2375端口背景:centos7.8vi/usr/lib/systemd/system/docker.service修改[Service]的ExecStart,增加-Htcp://0.0.0.0:2375[Service]Type=notify#thedefaultisnottousesystemdforcgroupsbecausethedelegateissuesstill#existsandsystemdcurrentlydoesnotsupport

    2022年6月9日
    90
  • ubuntu 安装 mariadb 数据库

    ubuntu 安装 mariadb 数据库卸载之前的数据库sudoaptpurgemariadb-server*安装数据库sudoaptinstallmariadb-server-y由于出于安全原因,mariadb初始化使用的操作系统的root认证,而不是密码认证.所以这里添加用户和启动密码认证.#添加用户’%’:表示所有主机的ipCREATEUSER’用户名’@’%’IDENTIFIEDBY’密码’;#将数据库访问权限赋值给用户grantALLon数据库.表名to’用户名’

    2022年6月1日
    73

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号