text 快捷方式，提示和技巧

Posted 2021-04-28

*==============================================*
*VSCode*
*==============================================*
*Basic Shortcuts* (see attached PDFs for more comprehensive list): https://code.visualstudio.com/docs/editor/codebasics

*How to Modify Intellisense:* https://code.visualstudio.com/docs/editor/intellisense

*Bracket Pair Colorizer 2 VSCode Extension* (recommended install): https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

*Beautify:* https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify

or 

*Prettier:* https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
_(two VSCode extensions that give you a lot of customizable control over code formatting; pick one and set it up if you're interested!)_

*7 Awesome Emmet HTML Time-Saving Tips:* https://designshack.net/articles/css/7-awesome-emmet-html-time-saving-tips/

*==============================================*
*Mac/PC General Shortcuts and Productivity*
*==============================================*
*Mac Keyboard Shortcuts:* https://support.apple.com/en-us/HT201236

*Taking Screenshots on Mac:* https://support.apple.com/en-us/HT201361

*Windows Keyboard Shortcuts:* https://support.microsoft.com/en-us/help/12445/windows-keyboard-shortcuts

*Taking/Annotating Screenshots in Windows:* https://support.microsoft.com/en-us/help/4488540/how-to-take-and-annotate-screenshots-on-windows-10

*Spectacle* (Mac-specific program to move/resize windows): https://www.spectacleapp.com/

*LastPass Password Manager* (this or another pw manager is highly recommended!): https://www.lastpass.com/hp

*==============================================*
*Chrome and DevTools:* 
*==============================================*
*Get Started With Viewing And Changing CSS:* https://developers.google.com/web/tools/chrome-devtools/css/

*Colorzilla* (grab color values by clicking on parts of a web page): https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=en

*Web Developer Tools* (easily turn on/off browser features and inspectors): https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm

*In-Browser Ruler:* https://chrome.google.com/webstore/detail/page-ruler-redux/giejhjebcalaheckengmchjekofhhmal?hl=en

*JS/CSS Code Beautifier* (makes it easier to view code through your browser): https://chrome.google.com/webstore/detail/javascript-and-css-code-b/iiglodndmmefofehaibmaignglbpdald