VSCode 开发前端插件

VSCode 开发前端插件VUEvueVUEvue

今天代码敲了吗

4767人浏览 · 2020-07-30 13:45:33

今天代码敲了吗 · 2020-07-30 13:45:33 发布

一、VUE(开发vue)

vue

在这里插入图片描述

Vue 2 Snippets

在这里插入图片描述

Vue VSCode Snippets

在这里插入图片描述

Vetur

在这里插入图片描述

Vuter

在这里插入图片描述

二、Auto

Auto Rename Tag

自动重命名标签
与Visual Studio IDE一样，自动重命名配对的HTML / XML标记。
在这里插入图片描述

Auto Close Tag

自动关闭标签
自动添加HTML / XML关闭标记，与Visual Studio IDE或Sublime Text相同。
在这里插入图片描述

三、Beautify

Beautify

美化javascript，JSON，CSS，Sass，和HTML的代码。
在这里插入图片描述

四、ESLint

ESLint

将ESLint集成到VS Code中
在这里插入图片描述

五、Code Runner

Code Runner

运行多种语言的代码段或代码文件：C，C ++，Java，JavaScript，PHP，Python，Perl，Perl 6，Ruby，Go，Lua，Groovy，PowerShell，BAT / CMD，BASH / SH，F＃脚本，F＃（ .NET Core），C＃脚本，C＃（.NET Core），VBScript，TypeScript，CoffeeScript，Scala，Swift，Julia，Crystal，OCaml脚本，R，AppleScript，Elixir，Visual Basic .NET，Clojure，Haxe，Objective-C ，Rust，球拍，Scheme，AutoHotkey，AutoIt，Kotlin，Dart，Free Pascal，Haskell，Nim，D，Lisp，Kit，V，SCSS，Sass，CUDA，Less和自定义命令在这里插入图片描述

六、CSS

CSS Modules

CSS模块扩展，支持自动完成，去定义
在这里插入图片描述

CSS Peek

速览：内联加载css文件并在那里进行快速编辑。（Ctrl+Shift+F12）
转至：直接跳至CSS文件或在新的编辑器（F12）中打开它
悬停：将定义悬停在符号（Ctrl+hover）上
在这里插入图片描述

cssrem

VSCode中的一个pxto rem插件，换算为rem（用于小程序开发）
在这里插入图片描述

七、小程序

minapp

微信小程序标签、属性的智能补全（同时支持原生小程序、mpvue 和 wepy 框架，并提供 snippets）
在这里插入图片描述

八、npm

npm

该扩展支持运行文件中定义的npm脚本，package.json并根据中定义的依赖项验证已安装的模块package.json。
在这里插入图片描述

九、Image

Image preview

图像预览
在这里插入图片描述

十、Path

Path Autocomplete

路径自动完成
在这里插入图片描述

Path Intellisense

自动完成文件名的Visual Studio Code插件。
在这里插入图片描述

十一、PowerShell

PowerShell

该扩展为Visual Studio Code提供了丰富的PowerShell语言支持。现在，您可以使用Visual Studio Code提供的出色的类似IDE的界面编写和调试PowerShell脚本。

在这里插入图片描述

十二、Git

Git History

Git历史记录，搜索和更多内容（包括git log）
在这里插入图片描述

十三、Vant

Vant Snippets

自动补全Vant 组件的标签

在这里插入图片描述

十四、vscode

vscode-icons

vscode图标美观VSCode
在这里插入图片描述

Chinese (Simplified) Language Pack for Visual Studio Code

中文（简体）语言包为VS Code提供本地化界面。
在这里插入图片描述

十五、Debugger

Debugger for Chrome

使vscode上的断点到Chrome上，方便调试
在这里插入图片描述

Debugger for Firefox

使vscode上的断点到Firefox上，方便调试
在这里插入图片描述

十六、jQuery

jQuery Code Snippets

超过130个用于JavaScript代码的jQuery代码段。只需输入字母“ jq”即可获得所有可用的jQuery代码片段的列表。
在这里插入图片描述

十七、Color

Color Highlight

此扩展程序可样式化文档中找到的css / web颜色。
在这里插入图片描述

十八、注释

koroFileHeader

一个好玩的注释插件，按下快捷键，ctrl+shift+p 输入codeDesign
在这里插入图片描述

十九、Prettier

Prettier - Code formatter

Visual Studio代码格式化程序，是一个固执己见的代码格式化程序。它执行一致的风格通过解析代码和重印,它有自己的规则,考虑到最大线长度,必要时包装代码。
在这里插入图片描述

二十 Bracket

Bracket Pair Colorizer**

可以将匹配的括号染成相同的颜色。同一个文件内嵌套的组件、函数、对象等带来的大量括号很容易让人找不到对应的括号，这款插件可以帮你完美解决
在这里插入图片描述

Import

Import Cost

**Importcost可以在代码中显示导入的估计大小。
在这里插入图片描述
**
记录VSCode中有用的前端开发插件，会持续更新。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^