VSCode开发Html + CSS – 效率

工欲善其事必先利其器

– 《论语·卫灵公》

VS Code Tips

  1. 输入标签名,然后直接回车; 比如想输入 <head></head>:在VSCode 里输入head然后回车即可;
  2. 输入默认HTML内容模板:输入 ! 然后回车,VSCode会自动生成一个Html内容模板;
  3. live server: 安装 Live Server插件,然后:
    • option1: 右键html源码 -> Open With live server;
    • Option 2: CMD + L + O
  4. Chrome 查看网页源码: cmd + option + u
  5. 快速加注释 (空行,或注释已有行): cmd + / ;写完注释,用#6的tips到下一行
  6. 自动新加并下一行: cmd + 回车;
    • 比如:输入 h1 + 回车,输完文字后:cmd + 回车
  7. mock一句话: Lorem + 回车;如果mock 10个单词的一句: Lorem10 + 回车
  8. Copy 当前行到下一行: shift + option + 向下箭头
  9. 按照单词快速移动光标: option + 左右箭头;
  10. 快速移动光标到一行最前或最后:cmd + 左右箭头;
  11. 一下写四个<li></li>: li*4 + 回车
  12. 选择同一个单词,批量修改:选中第一个,然后 cmd + d 多次,选择下面的这个单词。
  13. Emmet语法,快速写html和css:
    • #id-name
    • h1#id-name

VS Code – 插件

  1. Prettier – Code formatter

资源

  1. free stock photos & videos: https://www.pexels.com/ , https://unsplash.com/
  2. free download music: https://www.jamendo.com/start
  3. Design & Idea reference: Bootstrap Themes: https://themes.getbootstrap.com/
  4. Font & Icon: https://fontawesome.com/
  5. Simple embedding for Unsplash photos: https://source.unsplash.com/
  6. Can I Use: https://caniuse.com/

1 Response

发表评论

电子邮件地址不会被公开。 必填项已用*标注