前端VsCode使用插件

前端VsCode使用插件vscode前端插件

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

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

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

前端VsCode使用插件

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

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

4. code-translate 悬浮翻译插件

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

前端VsCode使用插件

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

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

前端VsCode使用插件

8.Path Intellisense

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

前端VsCode使用插件

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

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

前端VsCode使用插件

10.vscode-icons

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

 前端VsCode使用插件

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
   }

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

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

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

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

(0)


相关推荐

  • request.getParameterValues与request.getParameter的区别

    request.getParameterValues与request.getParameter的区别一、简单的对比request.getParameter用的比较多,相对熟悉  request.getParameterValues(String  name)是获得如checkbox类(名字相同,但值有多个)的数据。  接收数组变量,如checkobx类型    request.getParameter(String  name)是获得相应名的数据,

  • 位运算实现两个数的加法

    位运算实现两个数的加法

  • C语言最大公约数和最小公倍数

    C语言最大公约数和最小公倍数首先我们应该知道最大公约数和最小公倍数的基本概念最大公约数:指两个或多个整数共有约数中最大的一个最小公倍数:俩数相乘除以最大公约数一、最大公约数方法一:先令最大公约数max为1,当俩个数x、y都能被循环变量i整除时,把循环变量i赋值给最大公约数max,这样在循环结束后,就求得了最大公约数,但是这种做法过于复杂,耗时。方法二:先比较俩数的大小,然后::::;用两数中的较大数除以较…

  • sql语法:inner join on, left join on, right join on具体用法

    sql语法:inner join on, left join on, right join on具体用法

    2021年11月28日
  • linux下,查看redis版本号,一行命令搞定。[通俗易懂]

    linux下,查看redis版本号,一行命令搞定。[通俗易懂]进入redis部署目录,输入命令./redis-server–version,搞定。具体如下。[root@idoxuredis]#./redis-server–versionRedisserverv=3.2.0sha=00000000:0malloc=jemalloc-4.0.3bits=64build=74a42375bc62…

  • python利用海伦公式求三角形的面积

    python利用海伦公式求三角形的面积前言从小学我们都知道,三角形的面积是底乘以高除以2。那么已知任意一个三角形的三条边,如何能够求出三角形的面积呢?这里我们用到了海伦公式。海伦公式又译作希伦公式、海龙公式、希罗公式等,它是利用三角形的三条边的边长直接求三角形面积的公式,表达式为:其中p是三条边的和的一半儿。python根据三角形三条边求面积1.三角形的三条边的符合条件我们知道,三角形有三条边,且三条边…

    2022年10月21日

发表回复

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

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