Visual Studio Code设定与插件

因为小弟最近买了新电脑，顺便记录一下各式各样的插件，首先安装以下几个东西~

接下来开始介绍套件拉~

indent-rainbow

使缩排增加颜色，比较美观~

vscode-icons

提供有够潮的 icon

cdnjs

按下 F1，输入 cdnjs，可以快速查找 cdn

Prettier

快速排版~快捷键 Ctrl + Shift + F
以下为小弟习惯的设定:
1.切换视窗时自动存档
2.存档后自动执行
3.使用单引号

{  "files.autoSave": "onWindowChange",  "editor.formatOnSave": true,  "prettier.singleQuote": true}

Bracket Pair Colorizer

括号颜色与括号对应~

Preview on Web Server

于本机开启 Web Server，即时预览程式码

Live Server

于本机开启 Web Server，即时预览程式码

Live Sass Compiler

可以帮 sass 或 scss 编译出 css 档案
以下为设定总共做了几件事:
1.设定产出档案的路径与资料夹名称
2.各浏览器的 prefix
3.不产出 map 档

{  "liveSassCompile.settings.formats": [    {      "format": "expanded",      "extensionName": ".css",      "savePath": "/src/css"    },    {      "format": "compressed",      "extensionName": ".min.css",      "savePath": "/dist/css"    }  ],  "liveSassCompile.settings.autoprefix": ["> 1%", "last 2 versions"],  "liveSassCompile.settings.generateMap": false,}

ESLint

能为程式码增加规範，使程式码更整齐

Git History

可以直接看到 commit 纪录

git-autoconfig

切换 git 使用者

GitLens

在程式码后方可以看到 commit 详细资讯

gitignore

有两种 gitignore 套件
1.自动产生对应语言的 .gitignore 档案
2.右键可将档案加入 .gitignore

gitflow

开启专案各种 branch

Auto Rename Tag

可以一次更改前后 Tag

vue

能让 .vue 档案较容易阅读

Vue 2 Snippets

新增一些 vue 的常用模板

Vetur

补齐一些 vue 的提示与片段功能

以上就是小弟常用的一些插件
附上所有设定，字体: source-code-pro、FiraCode

{  // 更改字体  "editor.fontFamily": "'Fira Code', 'Source Code Pro', Consolas, 'Microsoft JhengHei'",  // 开启连字符号  "editor.fontLigatures": true,  // 主题  "workbench.colorTheme": "One Dark Pro",  // icon  "workbench.iconTheme": "vscode-icons",  // 将 tab 设定为 2 个空白键  "editor.tabSize": 2,  // 将 Terminal 修改为 Git Bash  "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",  // 删除档案时确认  "explorer.confirmDelete": false,  // git 自动 fetch  "git.autofetch": true,  // 拖曳移动档案不弹出确认视窗  "explorer.confirmDragAndDrop": false,  // js 与 ejs 可使用 emmet  "emmet.includeLanguages": {    "javascript": "html",    "ejs": "html"  },    // Format 设定 - 使用套件 Prettier  // 切换视窗自动储存  "files.autoSave": "onWindowChange",  // 储存时自动排版  "editor.formatOnSave": true,  // 每行宽度  "prettier.printWidth": 80,  // JS 使用单引号  "prettier.singleQuote": true,  // 尽可能省略箭头函式的括号  "prettier.arrowParens": "avoid",  // 字与括号保有空格  "prettier.bracketSpacing": true,  // 尽可能不加逗号  "prettier.trailingComma": "none",  // 句尾加上分号  "prettier.semi": true,    // eslint 自动修正  "eslint.autoFixOnSave": true,  // eslint 排版 html 与 vue 档  "eslint.validate": [    "javascript",    "javascriptreact",    {      "language": "html",      "autoFix": true    },    {      "language": "vue",      "autoFix": true    }  ],  "eslint.options": {    "plugins": [      "html"    ]  },    // liveSassCompile 产出设定  "liveSassCompile.settings.formats": [    {      "format": "expanded",      "extensionName": ".css",      "savePath": "/src/css"    },    {      "format": "compressed",      "extensionName": ".min.css",      "savePath": "/dist/css"    }  ],  // autoprefix 设定  "liveSassCompile.settings.autoprefix": [    "> 1%",    "last 2 versions"  ],  // 不产生 cssmap  "liveSassCompile.settings.generateMap": false,    // Vetur 不验证模板  "vetur.validation.template": false,    // git 设定使用者  "git-autoconfig.configList": [    {      "user.email": "XXXXXXXXX@gmail.com",      "user.name": "XXXXXX"    }  ]}