前端开发中的 vscode

  一直使用的是 WebStorm,比较重,尝试一下轻量的 vscode,记录一下配置和插件。

一、配置文件

链接: https://pan.baidu.com/s/1qPeuAwM8TUW8UA6yED0PfQ 密码:2171

二、插件列表

序号 插件名 用处
1 Auto Close Tag 自动闭合 HTML/XML 标签
2 Auto Rename Tag 自动完成另一侧标签的同步修改
3 Bracket Pair Colorizer 给括号加上不同的颜色,便于区分不同的区块,使用者可以定义不同括号类型和不同颜色
4 Chinese (Simplified) Language 简体中文
5 Color Highlight 颜色高亮
6 Color Picker 取色器
7 CSS Peek 使用此插件,你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时,选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置的 CSS 代码。
8 ESLint 格式化插件
9 filesize 在底部状态栏显示当前文件大小,点击后还可以看到详细创建、修改时间
10 goto node modules 快速定位 node 模块
11 HTML CSS Support 智能提示 CSS 类名以及 id
12 Image preview 图片预览。(支持 html、css 中图片资源预览)
13 JavaScript (ES6) code snippets ES6 语法智能提示,以及快速输入,不仅仅支持.js,还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含 js 代码文件的时间
14 Node.js Modules Intellisense 提供 JavaScript 和 TypeScript 导入声明时的自动补全
15 npm 支持运行文件中定义的 npm 脚本,并根据中定义的依赖项验证已安装的模块 package.json。
16 npm Intellisense 用于在 import 语句中自动填充 npm 模块
17 Path Intellisense 自动提示文件路径,支持各种快速引入文件
18 Prettier 格式化代码
19 Relative Path 相对路径
20 Swig(.tpl) 支持 hexo 中的 swig 文件
21 Vetur Vue 多功能集成插件,包括:语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger。vscode 官方钦定 Vue 插件,Vue 开发者必备。
22 vscode-fileheader 文件开头注释 ctrl + shift + i ,(/* \n * @Author: {author} \n * @Date: {createTime} \n */)
23 vscode-icons-mac 类 Finder 文件夹图标
24 Vue Peek 可跳转自定义组件
以上

随笔标题:前端开发中的 vscode

随笔作者:刘先玉

发布时间:2019年04月27日 - 16:46:26

最后更新:2019年04月27日 - 16:46:26

原文链接:https://liuxianyu.cn/article/vscode-config.html