提升前端开发速度之—VSCode/MAC

破晓书生
1,743 阅读4分钟

这是我参与11月更文挑战的第5天，活动详情查看：2021最后一次更文挑战

前端开发常用

作为一名前端开发，须知：工欲善其事，必先利其器，熟练的使用vscode是必备技能，熟练的使用MAC电脑，也是xx神器。

1, VSCode常用插件

  • 1， Eslint -检查代码是否符合规范

  • 2，GitLens -Git代码提示

  • 3，stylus -stylus语法支持

  • 4， Path Intellisense - 相对，绝对路径提示

  • 5，Prettier Code formatter -代码格式化

  • 6，Vetur -Vue语法支持，包括语法高亮，语法代码提示，语法检测

  • 7，Vue VSCode Snippets -Vue语法片段扩展

  • 8，npm Intellisense -npm模块自动补全提示

  • 9， Auto Close Tag -自动闭合HTML标签插件

  • 10， Auto Rename Tag -自动完成另一侧标签的同步修改

  • 11， JavaScript(ES6) Code Snippets - ES6语法智能提示

  • 12， HTML CSS Support -HTML标签上写CSS智能提示

  • 13， Bracket Pair Colorizer - 给括号加上不同颜色便于区分不同的代码块

  • 14， View In Browser - 在浏览器中查看静态文件

  • 15， Documents This -注释文档生成

  • 16， Debugger for Chrome -直接在Vscode里面进行调试JS文件

  • 17， JavaScript Snippet Pack - 针对JS的插件，包含了JS的常用语法和关键字， 很实用

  • 18， vscode-icons - 能够选择自己喜欢的图标主题，很好用，个人比较喜欢

  • 19， One Monokai Theme -能够选择自己喜欢的颜色主题，个人比较喜欢

  • 20， Reactjs code snippets - react开发的一些简写，提示，提高开发效率

  • 21， git blame - 审查每一行的代码的代码最近一次修改的作者

  • 22， px to rem & rpx -px转换rem

  • 23, Terminal -Vscode内置命令行插件

  • 24， Window Colors -每个VsCode都可以独特的自动配色

  • 25， live server -开启本地服务器

  • 26，Code Runner - 独立运行JS文件

2, vscode 打不开terminal, 可如下配置

{

   "telemetry.enableCrashReporter": false,

   "telemetry.enableTelemetry": false,

   "update.enableWindowsBackgroundUpdates": false,

   "update.showReleaseNotes": false,

   "workbench.iconTheme": "vscode-icons",

   "vsicons.dontShowNewVersionMessage": true,

   "editor.fontSize": 22,

   "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",

   "terminal.integrated.fontSize": 22,

   "terminal.integrated.tabs.enabled": true,

   "update.mode": "none",

   "workbench.colorTheme": "One Monokai",

   "terminal.integrated.automationShell.linux": "",

}

3, Vscode插件替换

替换方案: 打开电脑D:盘，—>找到自己的用户—> 找到.vscode文件 —>点击进入.vscode文件，

准备好vscode插件， 替换到extensions文件

4, Vscode 常用快捷键

1, 新建文件：chtr+n

2.新开窗口：ctrl+shift+n

3.分屏：ctrl+1/2/3

4.切换文件：alt+1/2/3或ctrl+tab

5.关闭当前窗口：ctrl+w

6.关闭所有已保存窗口：ctrl+k+w

7.显示/隐藏左侧边栏：ctrl+b

8.文件重命名：鼠标选中+f2

9.自动换行：alt+z

10.注释：ctrl+/

11.多行编辑：alt+鼠标左键

12.隐藏/显示终端：ctrl+~

13.查找并打开文件：ctrl+p

14.选中当前单词：ctrl+d

15.文件内容查找替换：ctrl+f ctrl+h

16.项目全局搜索：ctrl+shift+f

17.移动当前行，向上alt+up（方向键↑） 向下alt+down

18.在当前行上方插入一行：ctrl+shift+enter

19.跳转到文件头部/尾部：ctrl+home/end

20.选中光标到行首/行尾文本：shift+home/end

21.选中部分文字：shift+left/right/up/down

22.删除当前行：ctrl+shift+k

5, 电脑快捷键

Mac电脑

Command + Contral + Q   锁屏快捷键
Command + Shift + 4     截图： 
Command + Shift + G     冲访达中去往某个文件夹
Command + Shift + .     现实隐藏的文件夹，关闭也是这个命令

Window电脑

1.快速进入任务管理页面：Ctrl+Alt+delete
2.快速锁定电脑：window+L（当你看些不可描述的东西背后突然来人时的选择一）
3.所有窗口最小化：window+m（当你看些不可描述的东西背后突然来人时的选择二）
4.显示桌面：window+d（当你看些不可描述的东西背后突然来人时的选择三）
5.文件资源管理器：window+e
6.打开运行：window+r
7.撤销：ctrl+z 
8.复制、剪切、粘贴、删除：ctrl+c、 ctrl+x、 ctrl+v、delete
9.f2重命名(与vscode一样)
10.ctrl+home/down跳转到页面顶部，尾

iTerm 常用快捷键

Command + d  垂直分屏
Command + shift + d 水平分屏
Command + enter  全盘和小屏切换
Command + t 新建tab标签
Command + 左右方向键  tab标签签换
Command + ; 查看历史命令

6, MAC电脑NGINX

(1)查看Nginx安装目录

  • nginx -V
  • nginx -v (查看版本信息)

(2)检查电脑是否安装了nginx

  • brew search nginx

(3)检查nginx安装信息

  • brew info nginx

(4)安装nginx

  • brew install nginx

(5)安装目录

  • 配置文件路径：/usr/local/etc/nginx/nginx.conf
  • 安装路径：/usr/local/Cellar/nginx/1.15.7
  • 服务器默认路径：/usr/local/var/www

(6)查看nginx是否启动

  • ps -ef|grep nginx

(7)启动nginx

  • nginx
  • ./nginx -s reload

7, MAC 电脑Linux文件上传

  • 1, 方案一：

    ssh root@ip地址
zlm12345
scp /Users/zhengliming/Desktop/mf.png   root@ip地址:/root/btp_app/frontend/

  • 2，方案二：

    sftp  root@ip地址
put /Users/zhengliming/Desktop/dist.zip   /root/btp_app/frontend/
avatar
文章
阅读
粉丝