推荐常用插件
插件配置文件：找到"文件" -> "首选项" -> "设置"(或者： File->Preferences->Settings )，点击右上角，切换到setting.json配置文件1.【软件】VSCode汉化，语言切换请查看下图使用方法：
2.【软件】文件头部注释和函数注释:
(其他功能自行了解)~~~字段配置链接：官网链接
// 头部注释 --VSCode>setting.文件
"fileheader.customMade": {
// 头部注释默认字段
"Author": "your name",
"Date": "Do not edit", // 设置后默认设置文件生成时间
"LastEditTime": "Do not edit", // 设置后，保存文件更改默认更新最后编辑时间
"LastEditors": "your name", // 设置后，保存文件更改默认更新最后编辑人
"Description": "",
"FilePath": "Do not edit", // 设置后，默认生成文件相对于项目的路径
"custom_string_obkoro1": "可以输入预定的版权声明、个性签名、空行等"
},
// 函数注释
"fileheader.cursorMode": {
// 默认字段
"description":"",
"param":"",
"return":""
},
3.【前端】质量提示&错误，vscode代码自动格式化成eslint风格的代码，并且支持在html和vue中的代码
4.【前端】语法高亮, 质量提示&错误、格式化/风格、智能提示等。
特性：Vetur只支持整个文档格式化, 不支持选中某个片段格式化。
vetur官网链接,默认配置如下图（可以自定义）：
-
prettier: For css/scss/less/js/ts. -
prettyhtml: For html. -
stylus-supremacy: For stylus. -
vscode-typescript: For js/ts. The same js/ts formatter for VS Code. -
sass-formatter: For the .sass section of the files.
5.【前端】格式化/风格
// VSCode>setting.文件 自定义格式化风格（可以根据个人习惯更改）
// vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false,
// 重新设定tabsize
"editor.tabSize": 2,
// #每次保存的时候自动格式化
"editor.formatOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue"
],
// #每次保存的时候将代码按eslint格式进行修复
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
// #让prettier使用eslint的代码格式进行校验
"prettier.eslintIntegration": true,
// #去掉代码结尾的分号
"prettier.semi": false,
// #使用带引号替代双引号
"prettier.singleQuote": true,
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
// #vue组件中html代码格式化样式
}
},
// #让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
// #vue组件中html代码格式化样式
}
},
// 工作区位置
"workbench.sideBar.location": "left",
// 工作区缩放级别
"window.zoomLevel": 0,
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
}
vscode 中 prettier 和 ESLint 冲突（待续~~~~）
常用快捷键
- 新建文件：ctrl+n
- 打开新的窗口：ctrl+shift+n
- 分屏：
快捷键: ctrl+2/3
分屏图标：
4.切换文件：alt+1/2/3或ctrl+tab
5.关闭当前窗口：ctrl+w
6.关闭所有已保存窗口：ctrl+k+w
7.显示/隐藏左侧边栏：ctrl+b
9.多行编辑：alt+鼠标左键
10.隐藏/显示终端：ctrl+~
11.查找并打开文件：ctrl+p
12.文件内容查找替换：ctrl+f ctrl+h ，替换一个ctrl+shift+1，替换所有ctrl+alt+enter
14.在当前行上方插入一行：ctrl+shift+enter
15.跳转到文件头部/尾部：ctrl+home/end