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模块后, 做这个配置, 提示代码错误及不规范
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • listagg oracle10_oracle伪列

    listagg oracle10_oracle伪列oracle函数listagg的使用说明

  • SQL数据库查询练习题及答案

    SQL数据库查询练习题及答案题目:设有一数据库,包括四个表:学生表(Student)、课程表(Course)、成绩表(Score)以及教师信息表(Teacher)。四个表的结构分别如表1-1的表(一)~表(四)所示,数据如表1-2的表(一)~表(四)所示。用SQL语句创建四个表并完成相关题目。查询问题:1、查询Student表中的所有记录的Sname、Ssex和Class列。2、查…

  • ListView之多种类型Item

    ListView之多种类型Item一、概述一般而言,listview每个item的样式是一样的,但也有很多应用场景下不同位置的item需要不同的样式。拿微信举例,前者的代表作是消息列表,而后者的典型则是聊天会话界面。本文重点介绍

  • 谷歌地球Google Earth打不开的解决办法[通俗易懂]

    谷歌地球Google Earth打不开的解决办法[通俗易懂]从2020年11月20号左右,谷歌地球中国服务器全部关停,所有原来可以使用的hosts,全部不能使用了,导致原来可以在电脑上打开谷歌地球的,现在全部提示无网络,如下图:这个是谷歌地球的最新版,一样打不开:解决办法,尝试了,国内所有的有关谷歌地图的软件。唯一现在可以使用的:BIGEMAP如下图分下下载地址,大家可以安装来试一试,免费可用:http://download.bigemap.com/bmsetup.rar欢迎留言,提供更多谷歌地球的信息…

  • ViewPagerWithViewDemo【ViewPager和View搭配以及演示获取里面的值和CheckBox单选效果】…[通俗易懂]

    ViewPagerWithViewDemo【ViewPager和View搭配以及演示获取里面的值和CheckBox单选效果】…[通俗易懂]ViewPagerWithViewDemo【ViewPager和View搭配以及演示获取里面的值和CheckBox单选效果】…

  • Windows server 2003 安装vs2005 sp1补丁包报1718错误的解决方法

    Windows server 2003 安装vs2005 sp1补丁包报1718错误的解决方法收藏于2012-03-30迁移自个人的百度空间——————————–解决步骤如下1.在控制面板中打开“管理工具“。2.双击“本地安全策略”。 3.单击“软件限制策略”。(注意:如果未列出软件限制,请右击“软件限制策略”,然后单击“新建策略”。)4.在“对象类型”下,双击“强制”。 5.单击“除本地管理员以外的所有用户”…

发表回复

您的电子邮箱地址不会被公开。

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