【Vue学习】梦想成为前端开发的第二天

前言

俗话说的好，不用vscode的前端不是个好前端。我这么要上进（好装X）的人，怎么可能不会用vscode。其实说起来惭愧，我对于各种IDE和工具还只是停留在使用的表层，不像我熟知的几位大神，已经胸中全是快捷键，开发自然神。所以，搭好了环境之后，我开始学习使用vscode。

vscode使用

1. 软件安装

官网

VS Code中文网

下一步系列

这个步骤我觉得没啥说的。就是下载，之后双击，之后下一步，最后OK

2. 安装汉化包

1. 在插件商店里面安装Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
2. 使用快捷键shift+command+p
3. 输入“display”，然后回车
4. 选择“zh-cn”
5. 关闭“vscode”，再次打开就可以看到中文界面了

感觉这个又是有手就行系列。感觉暴露里一些事

3. 明确前端开发，安装各种插件

1. 驼峰翻译助手
2. auto close tag
3. auto rename tag 自动修改匹配的 HTML 标签。
4. auto complete tag
5. Beautify Beautify ：javascript, JSON, CSS, Sass, and HTML in Visual Studio Code.
6. Better Comments ：The Better Comments extension will help you create more human-friendly comments in your code.
7. Better TOML
8. Bracket Pair Colorizer 2 给嵌套的各种括号加上不同的颜色。
9. Code Spell Checker
10. Code Translate
11. Color Highlight
12. Error Lens
13. Highlight Matching Tag
14. Iconfont Previewer
15. indent-rainbow
16. JavaScript (ES6) code snippets
17. Material Icon Theme
18. Prettier - Code formatter
19. Prettier ESLint
20. special-console.log
21. Vue Language Features (Volar)

我从各大网站搜索的一些插件，别说安装了之后vscode感觉棒棒哒。你也试试吧。

4. 快捷键

• command + x 剪切一行；
• command + shift + k 直接删除一行
• command + z 回退
• command + f ：搜索
• command + alt + f： 替换
• command + shift + f：在项目内搜索
• command + p 快速打开最近打开的文件
• command + shift + n 打开新的编辑器窗口
• command + shift + w 关闭编辑器
• home 光标跳转到行头
• end 光标跳转到行尾
• command + home 跳转到页头
• command + end 跳转到页尾
• command + shift + [ 折叠区域代码
• command + shift + ] 展开区域代码
• command + / 添加关闭行注释
• shift + option +A 块区域注释

感觉这些操作总是会暴露些什么。

总结

今天花了写时间看了看vscode的一些操作和使用。插件我没有一一去验证，前人说好，我就先安装上，在开发过程中我慢慢去感受这些插件对我的帮助吧。我也顺便看了一些关于前端代码规范的东西。大概这就是我和其他开发不太一样的地方。很多人都喜欢先去写代码或者先去看vue语言。我现在是先搭好框架，安装好IDE，看一看前端的编码规范。之后去思考我想写一个什么样的demo，再去结合vue语言的一些特性，去做一些思考。

加油！年轻人！VS Code是真的好！