1.编辑器 - Visual Studio Code

1. 配置

编辑器效果图

默认字体

Fira Code

颜色主题

Solarized Dark

目录图表集

vscode-great-icons

User Settings

{
    "files.autoSave": "afterDelay", //短暂延迟后自动保存
    
    "editor.fontFamily": "Fira Code", //默认字体
    "editor.fontSize": 13, //字体大小
    "editor.lineHeight": 22, //字体行高
    
    "workbench.colorTheme": "Solarized Dark", //颜色主题
    "workbench.iconTheme": "vscode-great-icons", //目录图标集
    
    "fileheader.Author": "[name]", //头部注释插件默认作者
    "fileheader.LastModifiedBy": "[name]", //头部注释插件默认修改者
}

2. 前端插件

Auto Close Tag

Auto Close Tag - 自动关闭标签

Auto Import

Auto Import - 自动导入包

Auto Rename Tag

Auto Rename Tag - 自动重命名标签尾

Babel JavaScript

Babel JavaScript - ES6/React 语法高亮

Beautify

Beautify - 代码美化

Bookmarks

Bookmarks - 单行添加标签

Bracket Pair Colorizer

Bracket Pair Colorizer - 符号组着色

Can I Use

Can I Use - 兼容性显示

Code Spell Checker

Code Spell Checker - 单词拼写检测

Color Highlight

Color Highlight - 颜色高亮

Color Picker

Color Picker - 颜色选择

CSS Peek

CSS Peek - 样式定位

CSS-in-JS

CSS-in-JS - js 中 css 提示

cssrem

cssrem - css 转 rem

Debugger for Chrome

Debugger for Chrome - Chrome 调试器

Document This

Document This - js 文件注释

ESLint

ESLint - js 语法检测

filesize

filesize - 文件大小显示

Git Blame

Git Blame - Git 序列号显示

Git History

Git History - Git 提交记录

GitLens — Git supercharged

GitLens — Git supercharged - 每行提交记录

HTML CSS Support

HTML CSS Support - 样式提示

HTML Snippets

HTML Snippets - HTML 代码片段提示

HTMLHint

HTMLHint - HTML 语法检测

htmltagwrap

htmltagwrap - HTML 标签包裹

JavaScript (ES6) code snippets

JavaScript (ES6) code snippets - ES6/React 代码片段提示

jQuery Code Snippets

jQuery Code Snippets - jQuery 代码片段提示

markdownlint

markdownlint - md 语法检测

npm

npm - npm 扩展插件

open in browser

open in browser - 用浏览器打开

Path Intellisense

Path Intellisense - 路径自动补全

Prettier - Code formatter

Prettier - Code formatter - 代码格式化

Regex Previewer

Regex Previewer - 正则实时测试

stylelint

stylelint - 样式语法检测

Sublime Babel

Sublime Babel - Babel 高亮补丁

SVG Viewer

SVG Viewer - SVG 预览

TODO Highlight

TODO Highlight - TODO 注释高亮

TSLint

TSLint - TS 语法检测

VSCode Great Icons

VSCode Great Icons - 目录图标集

vscode-faker

vscode-faker - 模拟数据生成

vscode-fileheader

vscode-fileheader - 文件头部注释