# vscode-config
**Repository Path**: lafen/vscode-config
## Basic Information
- **Project Name**: vscode-config
- **Description**: 个人vscode常用插件、配置
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 0
- **Created**: 2019-03-23
- **Last Updated**: 2020-12-19
## Categories & Tags
**Categories**: Uncategorized
**Tags**: VSCode
## README
# 我的常用vscode插件和配置
## plugin
| plugin | desc |
| --------------------------------------------------------- | --------------------------------------- |
| Chinese (Simplified) Language Pack for Visual Studio Code | 简体中文 |
| HTML Snippets | html提示 |
| Auto Rename Tag | 标签自动重命名 |
| HTML CSS Support | html文件中写css |
| CSS Peek | css预览跳转 |
| **浏览器类** | |
| View In Browser | 浏览器打开 |
| view-in-browser | 浏览器打开 |
| Live Server | 页面根据代码更改自动更新 |
| EaseServer | 服务器方式打开html页面 |
| open in browser | 使用浏览器打开 |
| jQuery Code Snippets | jq代码提示 |
| JavaScript (ES6) code snippets | es6代码提示 |
| ESLint | 代码规范 |
| **样式类** | |
| language-stylus | stylus样式编写支持 |
| Live Sass Compiler | 自动编译sass为css（点击底栏watch sass） |
| **路径** | |
| Path Intellisense | 路径提示 |
| Path Autocomplete | 路径补全 |
| **npm** | |
| npm | npm命令 |
| npm Intellisense | npm包名补全 |
| **框架、ui类** | |
| VueHelper | vue开发提示 |
| Vetur | vue工具 |
| vue-format | 格式化vue文件 |
| vscode-element-helper | ElementUI提示 |
| mpvue snippets | mpvue提示 |
| ES7 React/Redux/GraphQL/React-Native snippets | react代码提示片段 |
| **快捷键** | |
| Sublime Text Keymap and Settings Importer | sublime快捷键和配置 |
| Terminal | 打开cmd终端 |
| filesize | 计算文件大小 |
| Import Cost | 提示导入的包大小 |
| View Node Package | node包 |
| Prettify JSON | 格式化json |
| **其他** | |
| vscode-fileheader | 自动生成文件头信息 |
| Markdown All in One | 支持markdown |
| **git** | |
| GitLens — Git supercharged | 提示代码的git提交信息 |
| **特效** | |
| Power Mode | 代码特效 |
| Output Colorizer | 输出着色 |
| **主题** | |
| Dracula Official | 主题 |
| vscode-icons | 图标 |
| Material Icon Theme | icon主题 |
| Material Theme | 主题 |
| One Dark Pro | Atom主题 |
| Sublime Material Theme | sublime主题 |
| | |
| | |
## setting.json
```json
{
"editor.fontSize": 16,
"files.autoSave": "afterDelay",
"files.encoding": "utf8",
"editor.tabSize": 2,
"html.format.indentHandlebars": true,
"html.format.indentInnerHtml": true,
// power mode
"powermode.enabled":true,
"powermode.enableShake": false,
"workbench.iconTheme": "material-icon-theme",
"breadcrumbs.enabled": true,
"workbench.colorTheme": "Sublime Material Theme - Dark",
"editor.quickSuggestions": {
"strings": true
},
"files.associations": {
"*.wpy": "vue"
},
"emmet.includeLanguages": {
"javascript": "javascriptreact"
}
// "powermode.presets": "particles",
// Valid values: "particles", "fireworks", "flames", "magic", "clippy", "simple-rift", "exploding-rift".
}
```
## html代码片段
```json
{
"Print to style1": {
"prefix": "st",
"body": [
""
],
"description": "Log output to style"
},
"Print to style2": {
"prefix": "style",
"body": [
""
],
"description": "Log output to style"
},
"Print to script1": {
"prefix": "sc",
"body": [
""
],
"description": "Log output to script"
},
"Print to script2": {
"prefix": "script",
"body": [
""
],
"description": "Log output to script"
},
"Print to viewport": {
"prefix": "meta:vp",
"body": [
"$1"
],
"description": "nice viewport"
},
"Print to no bug": {
"prefix": "nobug",
"body": [
"/**",
"* _ooOoo_",
"* o8888888o",
"* 88\" . \"88",
"* (| -_- |)",
"* O\\ = /O",
"* ____/`---'\\____",
"* .' \\| |// `.",
"* / \\\\||| : |||// \\",
"* / _||||| -:- |||||- \\",
"* | | \\\\\\ - /// | |",
"* | \\_| ''\\---/'' | |",
"* \\ .-\\__ `-` ___/-. /",
"* ___`. .' /--.--\\ `. . __",
"* .\"\" '< `.___\\_<|>_/___.' >'\"\".",
"* | | : `- \\`.;`\\ _ /`;.`/ - ` : | |",
"* \\ \\ `-. \\_ __\\ /__ _/ .-` / /",
"* ======`-.____`-.___\\_____/___.-`____.-'======",
"* `=---='",
"* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^",
"* 佛祖保佑 永无BUG",
"* 佛曰:",
"* 写字楼里写字间，写字间里程序员；",
"* 程序人员写程序，又拿程序换酒钱。",
"* 酒醒只在网上坐，酒醉还来网下眠；",
"* 酒醉酒醒日复日，网上网下年复年。",
"* 但愿老死电脑间，不愿鞠躬老板前；",
"* 奔驰宝马贵者趣，公交自行程序员。",
"* 别人笑我忒疯癫，我笑自己命太贱；",
"* 不见满街漂亮妹，哪个归得程序员？",
"*/"
],
"description": "no bug"
}
}
```
## js代码片段
```json
{
"Print to httpserver": {
"prefix": "nodehttp",
"body": [
"// 1. 引入模块",
"var http = require('http')",
"",
"// 2. 创建服务器对象",
"var server = http.createServer()",
"",
"// 3. 开启服务并监听端口",
"server.listen(3000,()=>{",
" console.log('the server is running at http://127.0.0.1:3000');",
"})",
"",
"// 4.注册请求事件",
"server.on('request',(req,res)=>{",
" $1",
"})"
],
"description": "quickly create http server"
},
"Print to for1": {
"prefix": "for",
"body": [
"for (var i = 0; i < arr.length; i++) {",
" $1",
"}"
],
"description": "quickly create for loop"
}
}
```
## Chrome插件
| plugin | desc |
| ------------------------- | ------------------------ |
| SimpleExtManager | 插件管理 |
| Octotree | 文件树方式查看github项目 |
| 谷歌上网助手 | 免费科学下载Chrome插件 |
| Vue.js devtools | vue调试 |
| React Developer Tools | react调试 |
| Wappalyzer | 查看网页使用的框架ui |
| Chrome Markdown Preview | 支持md |
| EditThisCookie | cookie管理 |
| JSONView | 格式json |
| Vysor.io | 手机投屏 |
| 广告终结者 | emmm... |
| Ads Killer Adblocker Plus | emmm... |
| | |
| | |