基于vscode的前端开发环境
2019-03-22 本文已影响0人
我有丶一个大西瓜
语言包
中文包: Chinese (Simplified) Language Pack for Visual Studio Code
-
Ctrl+Shift+P 打开命令面板，之后输入 "config" 筛选可用命令列表，最后选择配置语言命令。
外观设置
主题: Solarized Dark
- VSCode 已经内置可以直接在settings.json中配置
{
"workbench.colorTheme": "Solarized Dark"
}
- Installation
ext install EditorConfig
- settings.json
{
"workbench.iconTheme": "vscode-great-icons"
}
字体: Fira Code
缩进: Guides
- Installation
ext install Guides
- settings.json
{
"guides.normal.color.dark": "rgba(91, 91, 91, 0.6)",
"guides.normal.color.light": "rgba(220, 220, 220, 0.7)",
"guides.active.color.dark": "rgba(210, 110, 210, 0.6)",
"guides.active.color.light": "rgba(200, 100, 100, 0.7)",
"guides.active.style": "dashed",
"guides.normal.style": "dashed",
"guides.stack.style": "dashed",
}
- 效果
javascript console utils(自定义风格的console) - Installation
javascript console utils
- How to use
// 一键生成
cmd+shift+L
// 删除所有console
cmd+shift+D
- 修改插件
- git clone
- edit file extension.js replace 62 lines
const str = `${text}`.replace(/\'|\"/g,''); const logToInsert = `console.log('%c${str}: ','color: MidnightBlue; background: Aquamarine; font-size: 20px;',${text});`;- npm install vsce -g
- 修改包的版本如0.8.0(package.json中的version)
- vsce package生成vsix文件
-
卸载原有的javascript console utils插件，再从vscode安装
-
大功告成,look一下效果
风格检查
缩进方式: EditorConfig 通过简单的配置文件在不同团队成员、不同 IDE、不同平台下约定好文件的缩进方式、编码格式，避免出现混乱
- Installation
ext install EditorConfig
- How to use
new .editorconfig file in the root directory
- coding
[*]
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = false
insert_final_newline = true
indent_style = space
indent_size = 2
[{*.yml,*.json}]
indent_style = space
indent_size = 2
代码格式化: Prettier
- Installation
ext install esbenp.prettier-vscode
vue格式化: Vetur
- Installation
ext install Vetur
snippets(自定义代码片段) 神器!
- 自定义snippets
具体使用方法请点击这里 - plugin
1.HTML Snippets HTML 标签片段
2.Javascript (ES6) Code Snippets 常用的类声明、ES 模块声明、CMD 模块导入等
自动补全
- Auto Close Tag 自动补全要闭合的标签
- Auto Rename Tag 修改开始（结束）标签的时候修改对应的结束（开始）标签
- Path Intellisense 文件路径补全
- NPM Intellisense NPM 依赖补全
- IntelliSense for CSS class names in HTML CSS 类名补全
- Emmet vscode已经内置了Emmet
功能增强
- Color Highlight 识别代码中的颜色
- Bracket Pair Colorizer 识别代码中的各种括号，并且标记上不同的颜色
-
Project Manager 项目管理，让我们方便的在命令面板中切换项目文件夹
Project Manager: Save Project Save the current folder as a new project Project Manager: Edit Project Edit your projects manually (projects.json) Project Manager: List Projects to Open List all saved/detected projects and pick one Project Manager: List Projects to Open in New Window List all saved/detected projects and pick one to be opened in New Window Project Manager: Refresh Projects Refresh the cached projects - Git Lens 优化VSCode内置Git的体验
编码效率
Document This 能够一键给代码中的类、函数加上注释，支持函数声明、函数表达式、箭头函数等
- How to use
- windows
alt+ctrl+D- osx
重复俩次^(control)+⎇(option)+D
Code Spell Checker 实时的识别单词拼写是否有误，并给出提示
Code Runner 选中要执行的代码鼠标右键run code
插件管理工具(Settings Sync)
Settings Sync
使用GitHub Gist跨多台机器同步设置、代码片段、主题、文件图标、启动、键绑定、工作区和扩展。
