This is the fifth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

Common front-end development

As a front-end developer, notice: to do a good job, you must first sharpen its tools, skilled use of vscode is a necessary skill, skilled use of MAC computer, is xx magic.

1. Common VSCode plug-ins

  • 1, Eslint – Checks that code conforms to the specification

  • 2, GitLens -Git code tips

  • 3, stylus – Stylus syntax support

  • 4, Path Intellisense – Relative, absolute Path prompt

  • 5, Prettier Code formatter – Formatting Code

  • 6, Vetur-Vue syntax support, including syntax highlighting, syntax code hints, syntax detection

  • Vue VSCode Snippets -Vue syntax Snippets extension

  • 8. NPM Intellisense – NPM module auto-complete prompt

  • 9, Auto Close Tag – automatically Close HTML Tag plug-in

  • 10, Auto Rename Tag – Automatically Rename a label on the other side

  • 11, JavaScript(ES6) Code Snippets – ES6 syntax intelligence tips

  • 12, HTML CSS support-HTML tags write CSS smart tips

  • 13, Bracket Pair Colorizer – Add different colors to Bracket to make it easier to distinguish different code blocks

  • 14, View In Browser – View static files In your Browser

  • 15, Documents This – Comments document generation

  • 16, Debugger for Chrome – directly debug JS files in Vscode

  • 17, JavaScript Snippet Pack – a plugin for JavaScript that contains JavaScript syntax and keywords

  • 18, VScode – ICONS – you can choose your favorite ICONS. It is very easy to use

  • 19, One Monokai Theme – Can choose your favorite color Theme, personal preference

  • 20, Reactjs code snippets – react development some shorthand tips, improve development efficiency

  • 21, Git Blame – Review each line of code for the author of the last change to the code

  • 22, PX to REM & RPX – PX to REM

  • Terminal-vs code built-in command line plug-in

  • 24, Window Colors – each VsCode has unique automatic color matching

  • 25, Live Server – Enable local server

  • 26, Code Runner – Runs JS files independently

2. Vscode cannot open terminal. The configuration can be as follows

{

   "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": "",

}
Copy the code

3. Vscode plug-in replacement

Instead, open the D: disk on your computer, and – > find your own user – > find the.vscode file – > go to the.vscode file,

Prepare the vscode plug-in and replace it with the extensions file

4. Common shortcut keys of Vscode

1. Create a file CHTR +n

2. Open a window: CTRL + Shift + N

3. Split screen: CTRL +1/2/3

4. Switch files: Alt +1/2/3 or CTRL + TAB

5. Close the current window: CTRL + W

6. Close all saved Windows: CTRL + K + W

7. Show/hide the left sidebar: CTRL + B

8. Rename files: Select +f2

9. Wrap: Alt + Z

10. Comments: CTRL +/

11. Multi-line editing: Alt + left mouse button

12. Hide/show terminal: CTRL +~

13. Find and open files: CTRL + P

14. Select the current word: CTRL + D

15. Find and replace the file contents: CTRL + F CTRL + H

16. Project Global search: CTRL + Shift + F

17. Move the current row and press Alt up + Up (arrow key ↑) to press Alt down + Down

18. Insert CTRL + Shift + Enter above the current line

19. Jump to file head /end: CTRL + Home /end

20. Select the cursor to the beginning /end of the line: Shift +home/end

21. Select the text: Shift +left/right/up/ Down

22. Delete current line: CTRL + Shift + K

5. Computer shortcuts

The Mac

Command + Contral + Q Lock screen shortcut Command + Shift + 4 screenshot: Command + Shift + G flush to a folder Command + Shift +. Reality hidden folder, close is also this commandCopy the code

Windows computer

1. Press Ctrl+Alt+ Delete 2 to go to the task management page. Lock your computer quickly: Window +L (option 1 when you are looking at something indescribable and suddenly there are people behind you) 3. Minimize all Windows: Window +m (option 2 when you are looking at something that cannot be described) 4. Display desktop: Window + D (option 3 when you are looking at something indescribable and suddenly there are people behind you) 5. File Explorer: Window +e 6. Open and run: window+r 7. Copy, Cut, Paste, Delete: CTRL + C, CTRL + X, CTRL + V, Delete 9. F2 Rename (same as VScode) 10. CTRL + Home/Down jump to the top, end of the pageCopy the code

ITerm common shortcut keys

Command + D Vertical split screen Command + Shift + D Horizontal split screen Command + Enter Switch between the full screen and the small screen Command + t Create a TAB TAB Command + left and right arrow keys TAB TAB change Command + ; View History CommandCopy the code

6. NGINX for MAC

(1) Check the Nginx installation directory

  • nginx -V
  • Nginx -v (viewing version information)

(2) Check whether nginx is installed on your computer

  • brew search nginx

(3) Check the nginx installation information

  • brew info nginx

(4) install nginx

  • brew install nginx

(5) Installation directory

  • Configuration file path: / usr/local/etc/nginx/nginx. Conf
  • The installation path: / usr/local/Cellar/nginx / 1.15.7
  • The default path of the server is /usr/local/var/www

(6) Check whether nginx is started

  • ps -ef|grep nginx

(7) to start the nginx

  • nginx
  • ./nginx -s reload

7, MAC computer Linux file upload

  • 1. Plan 1:

    SSH root @ IP address zlm12345 SCP/Users/zhengliming/Desktop/mf. PNG root @ IP address:/root/btp_app/frontend/
Copy the code

  • 2. Plan 2:

    SFTP root @ IP address put/Users/zhengliming/Desktop/dist. Zip/root/btp_app/frontend /Copy the code