前端VsCode使用插件

1. Bracket Pair Colorizer 2 括号变颜色插件

2.Auto Rename Tag 自动重命名配对的HTML标签

3.Chinese (Simplified) (简体中文) Language Pack for Visual 中文简体的vscode汉化

4. code-translate 悬浮翻译插件

5.JavaScript (ES6) code snippets 该扩展包含十几个代码片段，可以使用它们来生成ES6代码片段

6. npm Intellisense npm 装包后，require 时的包智能提示，import 语句中自动填充 npm 模块。

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

8.Path Intellisense

插件自动提示文件路径，支持各种文件无脑快速引入，非常方便。

9. ES7 React/Redux/GraphQL/React-Native snippets

React/Redux/Reatc Native/react-router 语法智能提示，React 开发者必备。

10.vscode-icons

美化插件，用于美化目录树图标主题

11.open in browser

它的作用是可以把编辑的HTML文件等用浏览器打开

12.React Redux ES6 Snippets

react de 快捷键

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

输入imr 就可以直接导出import xxx from 'xxx'，还有其他的命令，在安装界面往下拉有使用说明文档

14.Reactjs code snippets

"emmet.includeLanguages": {
"javascript": "javascriptreact"
},

15.Error Lens 代码出错提示插件

16.code spell checker 错误单词检查

17.Prettier-Code formatter react插件提示代码和格式化代码，需要配置vscode

18.gitlens git提交代码插件

19. volar vue3代码提示插件

安装vsCode prettier插件

修改配置文件 `setting.json`

{"git.enableSmartCommit": true,// 修改注释颜色"editor.tokenColorCustomizations": {"comments": {"fontStyle": "bold","foreground": "#82e0aa"}},// 配置文件类型识别"files.associations": {"*.js": "javascript","*.json": "jsonc","*.cjson": "jsonc","*.wxss": "css","*.wxs": "javascript"},"extensions.ignoreRecommendations": false,"files.exclude": {"**/.DS_Store": true,"**/.git": true,"**/.hg": true,"**/.svn": true,"**/CVS": true,"**/node_modules": false,"**/tmp": true},// "javascript.implicitProjectConfig.experimentalDecorators": true,"explorer.confirmDragAndDrop": false,"typescript.updateImportsOnFileMove.enabled": "prompt","git.confirmSync": false,"editor.tabSize": 2,"editor.fontWeight": "500","[json]": {},"editor.tabCompletion": "on","vsicons.projectDetection.autoReload": true,"editor.fontFamily": "Monaco, 'Courier New', monospace, Meslo LG M for Powerline","[html]": {"editor.defaultFormatter": "vscode.html-language-features"},"editor.fontSize": 16,"debug.console.fontSize": 14,"vsicons.dontShowNewVersionMessage": true,"editor.minimap.enabled": true,"emmet.extensionsPath": [""],// vue eslint start 保存时自动格式化代码"editor.formatOnSave": true,// eslint配置项，保存时自动修复错误"editor.codeActionsOnSave": {"source.fixAll": true},"vetur.ignoreProjectWarning": true,// 让vetur使用vs自带的js格式化工具// uni-app和vue 项目使用"vetur.format.defaultFormatter.js": "vscode-typescript","javascript.format.semicolons": "remove",// // 指定 *.vue 文件的格式化工具为vetur"[vue]": {"editor.defaultFormatter": "octref.vetur"},// // 指定 *.js 文件的格式化工具为vscode自带"[javascript]": {"editor.defaultFormatter": "vscode.typescript-language-features"},// // 默认使用prettier格式化支持的文件"editor.defaultFormatter": "esbenp.prettier-vscode","prettier.jsxBracketSameLine": true,// 函数前面加个空格"javascript.format.insertSpaceBeforeFunctionParenthesis": true,"prettier.singleQuote": true,"prettier.semi": false,// eslint end// react// 当按tab键的时候，会自动提示"emmet.triggerExpansionOnTab": true,"emmet.showAbbreviationSuggestions": true,"emmet.includeLanguages": {// jsx的提示"javascript": "javascriptreact","vue-html": "html","vue": "html","wxml": "html"},// end"[jsonc]": {"editor.defaultFormatter": "vscode.json-language-features"},// @路径提示"path-intellisense.mappings": {"@": "${workspaceRoot}/src"},"security.workspace.trust.untrustedFiles": "open","git.ignoreMissingGitWarning": true,"window.zoomLevel": 1}

前端VsCode使用插件相关推荐

前端VSCode常用插件及安装
VSCode的功能如此强大,这与它们的插件密密相关,插件的安装起来超级简单,种类繁多,这给我们开发人员提供了很好地的便利.但是新手学习期间不需要安装许多插件,这里我来给大家介绍一下新手学习前端常用的插 ...
前端vscode必备插件推荐（墙裂推荐）
前言:vscode是一款强大的前端编辑软件,有些人说ws(webstorm)更好用,但是vs重在轻量级啊!!!而且根据自己的开发习惯安装适合自己的插件后,用起来简直不要太舒服了好嘛!!! 文末有惊喜~ ...
前端VSCode常用插件安装和使用
本篇文章先介绍下常见的插件~~~~ VSCode常用的插件 vscode之所以被称为宇宙第一神器,其中丰富的插件功不可没,安装起来超级简单,给我们开发带来了极大的便捷. 注意,新手学习期间,不建议安装 ...
千锋重庆web前端技术分享之前端VSCode常用插件
一.VSCode常用的插件vscode之所以被称为宇宙第一神器,其中丰富的插件功不可没,安装起来超级简单,给我们开发带来了极大的便捷. 注意,新手学习期间,不建议安装形形色色的插件,用到啥就安装啥.因 ...
前端vscode常用插件
Auto Rename Tag 这是一个html标签的插件,可以让你修改一边标签,另外一边自动改变. Beautify 格式化代码插件 Braket Pair Colorizer 给js文件中的每一个 ...
html5e插件,前端vscode必备插件，给你更好的编程体验！
工欲善其事,必先利其器.在这里,我会给你推荐很多实用的插件,让你对 vscode 有更深刻的体会,渐渐地你就会知道它有多好用. 走马观花前,请先将你的 vscode 更新到最新版本. 通用插件 HTM ...
VSCode前端开发工具插件--LiveServer实时刷新网页
VSCode前端开发工具插件–LiveServer实时刷新网页 1.概述当我们使用VSCode工具开发前端HTML页面时,修改内容后都要重新刷新网页才能展示更新代码的内容.那么有没有一种方式能够实时 ...
走进前端 VScode插件安装 Gitee提交
一,认识前端什么是前端前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页.前端技术一般分为前端设计和前端开发,前端设计理解为网站网页的视觉设计,前端开发则是网站前台代码的实现, ...
前端vscode插件bito
GPT-4和ChatGPT越来越火,前端人员是否也能在日常工作中尝试体验其带来的乐趣呢? 答案是可以的!安排!! 今天介绍一款vscode的插件 [bito]. 安装安装后只需要自己注册一下,创建一 ...

前端VsCode使用插件

前端VsCode使用插件相关推荐

最新文章

热门文章