总结一些个人常用的vs code的常用插件及常用技巧，让你不再为选择和使用编辑器而浪费时间
创建自己的工作区
vs-code提供了工作区的功能，为你的项目创建工作区，然后在工作区文件setting对象内添加如下设置
注意：以下配置是基于接下来介绍的插件设置的，如果没有安装插件是不会有任何效果的哦
{
// 換行
"editor.wordWrap": "on",
// 代码缩进修改成2个空格
"editor.tabSize": 2,
// 不檢查縮進，保存后統一按設置項來設置
"editor.detectIndentation": false,
//保存的时候自动格式化
"editor.formatOnSave": true,
// 字體大小
"editor.fontSize": 16,
// 設置行高
"editor.lineHeight": 24,
// 主題
"workbench.colorTheme": "Visual Studio Light",
// 左側工具欄是否可見
"workbench.activityBar.visible": true,
// 控制何时自动保存已更新文件。接受的值: "off"、"afterDelay"、"onFocusChange" (编辑器失去焦点)、"onWindowChange" (窗口失去焦点)。如果设置为 "afterDelay"，可在 "files.autoSaveDelay" 中配置延迟时间。
"files.autoSave": "onWindowChange",
// "files.autoSaveDelay": 3000,
// 让prettier使用eslint的代码格式进行校验
"prettier.eslintIntegration": true,
// 去掉代码结尾的分号
"prettier.semi": true,
// 使用带引号替代双引号
"prettier.singleQuote": true,
// 启用后，按下 TAB 键，将展开 Emmet 缩写。
"emmet.triggerExpansionOnTab": true,
// js設置單引號
"javascript.preferences.quoteStyle": "single",
// 让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// html格式化
"vetur.format.defaultFormatter.html": "js-beautify-html",
// 使用eslint 風格使用standard 進行代碼規則限制
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
{
"language": "vue",
"autoFix": true
},
"html",
"vue"
],
//自动保存信息
// By default, create file username
"fileheader.Author": "you name",
// By default, update file username.
"fileheader.LastModifiedBy": "you name",
// By default, common template. Do not modify it!!!!!
"fileheader.tpl": "/*\r\n * @Author: {author}\n * @Date: {createTime}\n * @Last Modified by: {lastModifiedBy}\n * @Last Modified time: {updateTime}\n */\n",
// vue组件中html代码格式化样式
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
}
}
}
常用插件介绍
自动补全
- Auto Close Tag ：自动闭合
html等标签（</...>） - Auto Rename Tag ：修改 html 标签时，自动修改闭合标签。
- Path Intellisense ：自动提示补全路径。
- Emmet ：大家应该很熟悉这个插件了（很好用），VS Code 已经内置了，很到位。
代码检查
- ESLint ：检查 js 语法规范，你可以使用不同的规范，如 airbnb 、standard 、google。
- TSLint ：检查 typescript 语法规范。
- Stylelint ：检查 CSS/SCSS/Less 语法规范。
- Markdownlint ：检查 markdown 语法规范。
代码格式化
- Prettier ：让你的代码看起来更整洁，需要配置，稍后会说到配置
代码注释
- Document This ：可以给函数、类等自动的加上详细的注释。
- vscode-fileheader : 为文档自己生成作者信息，及每次修改后记录最后修改时间
常用技巧介绍
快捷键
常用的快捷键就不一一列出来啦，列一些有用但你不一定知道的
alt + click可选定多处进行多光标编辑，这个对于要同时编辑多个地方，但又不能使用全局替换的时候非常有用ctrl + shift + 方向键按单词选择区域，shift + 方向键只能一个一个字母的选择，当你想选择一个单词时，这个快捷键非常棒ctrl + enter向下插一行ctrl + shift + enter向上插一行shift + alt + 右方向键选择当前代码块，再按一下选择包涵当前的上一层代码，加左方向键是反选alt + 方向键向上或向下移动所选代码行ctrl + shift + k删除当前行，但总觉得按得有点多，个人喜欢用ctrl + x，哈哈~~ctrl + k 、ctrl + 0折叠所有代码块ctrl + k 、ctrl + j展开所有代码块ctrl + g跳到指定行ctrl + k 、ctrl + s搜索对应快捷键绑定
