前端必备利器

---

一、工欲善其事必先利其器

• ColorPix取色器 + QQ量尺寸----------------CSS操作
• VSCode(Sublime Text 3) + Git Bash------轻量级开发环境
• WebStorm----------------------------------------重量级IDE
• GitHub + FQ工具-------------------------------外面的世界很精彩
• Node.js--------------------------------------------终极大杀器 npm

二、具体安装细节以及操作高效的方式

• 1、VSCode

  • 1、Ctrl+shift+P--------------------------------打开命令行界面

  • 2、Ctrl+P---------------------------------------搜索

  • 3、安装open in browser

  • 4、！+ Tab 快速生成HTML5代码块

  • 5、div.red>a是div标签的class是red,包含一个字标签a

  • 6、div*5快速创建5个div块

  • 7、上述3种都是Emmet写法，详见 Emmet总结

  • 8、VSCode+GitHub更新blog

  • 

    VS提交github.png
  • 

    VS提交github2.png
• 2、Git Bash
  • 1、设置透明，方便操作
  • 

    image.png
  • 2、滚动条在右侧
  • 

    image.png
  • 3、设置编码方式
  • 

    image.png
• 3、GitHub入门
  • 1、创建仓库
  • 

    github第一步.png
  • 2、书写仓库名字+设置为SSH方式、copy代码到Git Bash执行
  • 

    github第2步.png
  • 

    github第3步.png
  • 3、注意把GitHub Pages打开，让别人访问你
  • 

    github第4部注意事项.png
  • 4、注意SSH的设置
  • 

    github第5部注意事项.png
  • 

    github第6部注意事项.png
  • 

    github第7部注意事项.png
  • 

    github第8部注意事项.png
• 4、Node.js入门
  • 1、快速配置环境 node
    安装完毕，不要点击图标。用Git Bash输入以下三句指令

  npm config set registry https://registry.npm.taobao.org/
  npm config set loglevel http
  npm config set progress false
  

  生成的配置文件在C:\Users\你的用户名字.npmrc
  • 2、体会npm的巨大威力

  npm i -g fanyi
  

  这个fanyi软件在C:\Users\你的电脑名字\AppData\Roaming\npm\node_modules\fanyi\bin下。以后可以在Git Bash命令行中直接查单词了，输入

  $ fanyi love
  

  • 3、Git Bash下直接进入Node环境，操作js

  $ node
  //进入node环境，下一行开始 "$" 符号变为 ">"
  > 1+1
  > 2