vscode配置 | 插件
工欲善其事，必先利其器
vscode配置篇
- 1、vscode代码块设置
- 2. vscode插件【强烈推荐】
-
- 2.1 vsCode 设置为中文语言
- 2.2 保存后自动格式化代码
- 2.3. 编写markdown文件并预览
- 2.4.git神器 GitLens
- 2.5. Bracket Pair Colorizer 2：成对括号特别标识
- 2.6.highlight-icemode：选中相同的代码时，让高亮显示更加明显
- 2.7.TODO Highlight ：TODO标识
- 2.8.Vetur :vue 开发神器
- 2.9.ES7 React/Redux/GraphQL/React-Native snippets
- 2.10. Prettier :代码格式化
- 2.11.Beautify
- 2.12. ESLint：代码格式校验
- 2.13. JavaScript(ES6) code snippets
- 2.14.indent-rainbow：突出显示代码缩进
- 2.15.Code Spell Checker：单词拼写错误检查
- 2.16. Auto Close Tag、Auto Rename Tag
- 2.17.Better Comments：华丽的各种注释
- 2.18.CSS Peek
- 2.19. Import Cost:引入包大小计算,对于项目打包后体积掌握很有帮助
- 2.20. CSScomb : CSS 书写顺序规则
- 2.21 javascript console utils（快速打印console日志）
- 2.22 project-tree（快速将文件目录追加进Readme.md）
- 2.23 koroFileHeader（快速在vscode中用于生成文件头部注释和函数注释的插件）
1、vscode代码块设置
提前设置实用代码块，可大大减少开发的时间！
具体设置、代码及使用方式，可前往查看 --> 【自定义代码块】
2. vscode插件【强烈推荐】
2.1 vsCode 设置为中文语言
方式一：
安装插件:
Chinese (Simplified) Language Pack for Visual Studio Code
方式二：
输入快捷键：
Cmd+Shift+P
or
输入：Configure Display Language
选择：zh-cn
2.2 保存后自动格式化代码
1.选择设置
2. 搜索editor.formatOnSave并勾选
2.3. 编写markdown文件并预览
右击.md文件 选择预览
默认界面比较简介，所以我一般换装两个插件：
Markdown Preview Github Styling&& Markdown Preview Enhanced
使用插件后，效果如下：
2.4.git神器 GitLens
将光标放置在代码的当前行，可以看到这样代码的提交者是谁，以及提交时间。这一点，是 GitLens 最便捷的功能。
- 查看某个 commit 的代码改动记录
- 查看不同的分支
- 可以将两个 commit 进行代码对比
- 可以将两个 branch 分支进行整体的代码对比
2.5. Bracket Pair Colorizer 2：成对括号特别标识
2.6.highlight-icemode：选中相同的代码时，让高亮显示更加明显
2.7.TODO Highlight ：TODO标识
以特别的文字颜色来区分开和普通代码，可以让你一眼就看到TODO代办
2.8.Vetur :vue 开发神器
Vue 多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。VS Code 官方钦定 Vue 插件，Vue 开发者必备。
2.9.ES7 React/Redux/GraphQL/React-Native snippets
React/Redux/react-router 的语法智能提示
2.10. Prettier :代码格式化
Prettier 是一个代码格式化工具，只关注格式化，但不具备校验功能
一个好的格式化代码格式，可以让人更加清晰明了的看清代码！！！
2.11.Beautify
代码格式化工具。
2.12. ESLint：代码格式校验
日常开发中，建议用可以用 Prettier 做代码格式化，然后用 eslint 做校验。
2.13. JavaScript(ES6) code snippets
ES6 语法智能提示，支持快速输入。
2.14.indent-rainbow：突出显示代码缩进
indent-rainbow插件：色彩背景突出显示代码缩进。
2.15.Code Spell Checker：单词拼写错误检查
这个拼写检查程序的目标是帮助捕获常见的单词拼写错误，可以检测驼峰命名
可以快速的检测出是否有单词错误，避免一些名称不统一的错误。
2.16. Auto Close Tag、Auto Rename Tag
自动闭合标签、自动对标签重命名
2.17.Better Comments：华丽的各种注释
为注释添加更醒目、带分类的色彩
2.18.CSS Peek
增强 HTML 和 CSS 之间的关联，快速查看该元素上的 CSS 样式
使用方式： 按住 CTRL + 移到鼠标到要查看样式的类上就可以看到该类的定义了
2.19. Import Cost:引入包大小计算,对于项目打包后体积掌握很有帮助
2.20. CSScomb : CSS 书写顺序规则
可根据个人喜好设置
2.21 javascript console utils（快速打印console日志）
【参考地址】
相信打印日志是开发者的一个高频的操作。
正常的操作是先敲出console.log(),在进行变量的赋值操作，最后去控制台进行查看日志。一天下来可能会重复很多次该操作，那么就会很无奈，和烦躁。
诶，有一个插件可以快速进行日志的打印，别人都在用了，你还在等什么？
使用方式：
1.鼠标选择需要打印的内容或者变量
2.mac用户按住 shift+command+L
windows用户按住shift+ctrl+L
然后就会在下一行生成如下代码： console.log('abcd:', abcd);
这个插件还提供一个快捷键shift+command+D，一键删除本页面所有console.log日志信息，也很常用，不过要慎用哦！
2.22 project-tree（快速将文件目录追加进Readme.md）
安装插件：
使用步骤：
- 删除
node_modules，不然数据会大到你怀疑人生 - 组合键： shift + command / ctrl + p , 输入
>Project Tree
- 稍等片刻，打开
README.md（如何文件不存在，会自动帮你创建）文件，即可看到目录
2.23 koroFileHeader（快速在vscode中用于生成文件头部注释和函数注释的插件）
- 安装插件
- 个性化配置
首选项 -> 设置 -> 搜索 fileheader -> 个性化代码配置
个性化代码配置 【更多配置项】
// 头部注释默认字段
"Author": "Bonnie",
"Date": "Do not edit", // 设置后默认设置文件生成时间
"LastEditTime": "Do not edit", // 设置后，保存文件更改默认更新最后编辑时间
"LastEditors": "Bonnie", // 设置后，保存文件更改默认更新最后编辑人
"Description": "",
"FilePath": "Do not edit", // 设置后，默认生成文件相对于项目的路径
"custom_string_obkoro1": "可以输入预定的版权声明、个性签名、空行等"
新建文件，保存即可出现
