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

·  阅读 167
提升前端开发速度之—VSCode/MAC

这是我参与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/
    复制代码
分类:
前端
分类:
前端