ÔÚLinuxÉÏʹÓÃVisual Studio Code¾ÙÐÐÇ°¶Ë¿ª·¢µÄÍƼöÉèÖÃ
ÔÚlinuxÉÏʹÓÃvisual studio code¾ÙÐÐÇ°¶Ë¿ª·¢µÄÍƼöÉèÖÃ
СÐò£º
Ëæ×ÅÇ°¶Ë¿ª·¢µÄѸËÙÉú³¤£¬Ô½À´Ô½¶àµÄ¿ª·¢ÕßÑ¡ÓÃVisual Studio Code£¨¼ò³ÆVS Code£©×÷ΪÖ÷ÒªµÄ´úÂë±à¼Æ÷¡£VS CodeÊÇÒ»¿îÃâ·Ñ¿ªÔ´µÄÇáÁ¿¼¶±à¼Æ÷£¬Ö§³Ö¸»ºñµÄÀ©Õ¹²å¼þ£¬¿ÉÒÔÖª×ãÇ°¶Ë¿ª·¢µÄÖÖÖÖÐèÇó¡£
±¾ÎĽ«¸ø³öÔÚLinuxÉÏʹÓÃVS Code¾ÙÐÐÇ°¶Ë¿ª·¢µÄÍƼöÉèÖ㬰üÀ¨×°ÖúÍÉèÖð취£¬²¢¸½ÉÏһЩ´úÂëʾÀý¡£
Ò»¡¢×°ÖÃVS Code
ͨ¹ýÒÔÏ°취ÔÚLinuxÉÏ×°ÖÃVS Code£º
·¿ªÖն˲¢½øÈëVS Code¹Ù·½ÍøÕ¾£ºhttps://code.visualstudio.com/¡£
µã»÷¡°Download for Linux¡±°´Å¥ÏÂÔØVS CodeµÄDebian°ü¡£
ÔÚÖÕ¶ËÊäÈëÒÔÏÂÏÂÁî×°ÖÃVS Code£º
sudo dpkg -i <vscode-package>.deb sudo apt-get install -f
µÇ¼ºó¸´ÖÆ
×°ÖÃÍê³Éºó£¬ÊäÈë¡°code¡±ÏÂÁî¼´¿ÉÆô¶¯VS Code¡£
Á¬Ã¦Ñ§Ï°¡°Ç°¶ËÃâ·ÑѧϰÌõ¼Ç£¨ÉîÈ룩¡±£»
¶þ¡¢×°Öó£ÓÃÀ©Õ¹²å¼þ
VS CodeµÄÀ©Õ¹²å¼þ¼«´óµØÔöÇ¿ÁËÆ书Ч£¬ÏÂÃæÏÈÈݼ¸¿î³£ÓõÄÀ©Õ¹²å¼þ£º
ESLint£ºÓÃÓÚ´úÂë¹æ·¶¼ì²éµÄ²å¼þ¡£
×°ÖÃÒªÁ죺ÔÚVS CodeÖÐËÑË÷¡°ESLint¡±²¢µã»÷×°Öá£
Prettier£ºÓÃÓÚ´úÂëÃûÌû¯µÄ²å¼þ£¬Ö§³Ö¶àÖÖÓïÑÔ¡£
×°ÖÃÒªÁ죺ÔÚVS CodeÖÐËÑË÷¡°Prettier – Code formatter¡±²¢µã»÷×°Öá£
Live Server£ºÌṩһ¸öÍâµØ¿ª·¢Ð§ÀÍÆ÷£¬ÊµÊ±äÖȾHTML¡¢CSSºÍJavaScriptÎļþµÄÐ޸ġ£
×°ÖÃÒªÁ죺ÔÚVS CodeÖÐËÑË÷¡°Live Server¡±²¢µã»÷×°Öá£
ͨ¹ýÉÏÊö²å¼þµÄ×°Ö㬴ó´ó¼ò»¯ÁËÎÒÃǵĿª·¢Á÷³ÌºÍÌáÉýÁ˱àÂëЧÂÊ¡£
Èý¡¢ÉèÖÃESLint
¹ØÓÚÇ°¶Ë¿ª·¢À´Ëµ£¬±àд¹æ·¶µÄ¡¢ÕûÆëµÄ´úÂëÖÁ¹ØÖ÷Òª¡£ESLintÊÇÒ»¿îºÜÊÇÓÅÒìµÄ´úÂë¹æ·¶¼ì²é¹¤¾ß£¬¿ÉÒÔ×ÊÖúÎÒÃǼá³Ö´úÂëµÄÒ»ÖÂÐÔ¡£
ÒÔÏÂÊÇÉèÖÃESLintµÄ°ì·¨£º
ÔÚÏîÄ¿¸ùĿ¼ÏÂ×°ÖÃESLint£º
npm install eslint --save-dev
µÇ¼ºó¸´ÖÆ
ÔÚÖÕ¶ËÖÐÔËÐÐÒÔÏÂÏÂÁîÌìÉúESLintµÄÉèÖÃÎļþ£º
npx eslint --init
µÇ¼ºó¸´ÖÆ
ƾ֤ÌáÐÑÑ¡ÔñÉèÖÃÎļþµÄ¹æÔò£¬¿ÉÒÔʹÓÃAirbnb¡¢GoogleµÈÔ¤ÖùæÔò£¬Ò²¿ÉÒÔ×Ô¼º½ç˵¡£
ÔÚVS CodeµÄÉèÖÃÖÐÌí¼ÓÒÔÏÂÉèÖãº
"editor.codeActionsOnSave": { "source.fixAll.eslint": true }
µÇ¼ºó¸´ÖÆ
ÕâÑù£¬Ã¿´ÎÉúÑÄÎļþʱ£¬VS Code»á×Ô¶¯Å²ÓÃESLint¾ÙÐдúÂë¹æ·¶¼ì²é²¢ÊµÑéÐÞ¸´¹ýʧ¡£
ËÄ¡¢ÉèÖÃPrettier
PrettierÊÇÒ»¿î´úÂëÃûÌû¯¹¤¾ß£¬¿ÉÒÔ×Ô¶¯¶Ô´úÂë¾ÙÐÐÃûÌû¯£¬ÈôúÂë¼á³ÖÒ»ÖµÄÆøÑæÆøÑæ¡£
ÒÔÏÂÊÇÉèÖÃPrettierµÄ°ì·¨£º
ÔÚÏîÄ¿¸ùĿ¼ÏÂ×°ÖÃPrettier£º
npm install prettier --save-dev
µÇ¼ºó¸´ÖÆ
ÔÚVS CodeµÄÉèÖÃÖÐÌí¼ÓÒÔÏÂÉèÖãº
"editor.defaultFormatter": "esbenp.prettier-vscode", "[javascript]": { "editor.formatOnSave": true }
µÇ¼ºó¸´ÖÆ
ÕâÑù£¬Ã¿´ÎÉúÑÄJavaScriptÎļþʱ£¬VS Code»á×Ô¶¯Å²ÓÃPrettier¾ÙÐдúÂëÃûÌû¯¡£
Î塢ʹÓÃLive Server
Live ServerÊÇÒ»¿îºÜÊÇÓÐÓõÄÀ©Õ¹²å¼þ£¬ÌṩÁËÒ»¸öÍâµØ¿ª·¢Ð§ÀÍÆ÷£¬ÊµÊ±äÖȾHTML¡¢CSSºÍJavaScriptÎļþµÄÐ޸ġ£ÒÔÏÂÊÇʹÓÃLive ServerµÄ°ì·¨£º
ÔÚVS CodeÖÐÓÒ¼üµ¥»÷ÏîÄ¿Îļþ¼Ð²¢Ñ¡Ôñ¡°Open with Live Server¡±¼´¿ÉÆô¶¯ÍâµØ¿ª·¢Ð§ÀÍÆ÷£¬Ä¬È϶˿ÚΪ5500¡£
Áù¡¢´úÂëʾÀý
ÕâÀï¸ø³öÒ»¸ö¼òÆÓµÄHTMLÒ³ÃæµÄ´úÂëʾÀý£º
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Hello, world!</h1> <script src="script.js"></script> </body> </html>
µÇ¼ºó¸´ÖÆ
ÔÚÉÏÊö´úÂëÖУ¬style.cssºÍscript.js»®·ÖÊÇÑùʽºÍ¾ç±¾Îļþ£¬¿ÉÒÔͨ¹ýLive ServerʵʱäÖȾҳÃæµÄת±ä¡£
½áÂÛ£º
ͨ¹ýÉÏÊöÉèÖúͰ취£¬ÎÒÃÇ¿ÉÒÔÔÚLinuxÉÏʹÓÃVisual Studio Code¾ÙÐиßЧµÄÇ°¶Ë¿ª·¢¡£×°Öó£ÓÃÀ©Õ¹²å¼þ¡¢ÉèÖôúÂë¹æ·¶¼ì²éºÍ´úÂëÃûÌû¯¹¤¾ß£¬²¢ÍŽáLive ServerÌṩµÄÍâµØ¿ª·¢Ð§ÀÍÆ÷£¬´ó´óÌá¸ßÁË¿ª·¢Ð§ÂʺʹúÂëÖÊÁ¿¡£Ï£Íû¶ÁÕß¿ÉÒÔƾ֤×Ô¼ºµÄÐèÇóºÍÏîÄ¿Ìصã¾ÙÐнøÒ»²½µÄÀ©Õ¹ºÍÉèÖã¬ÎªÇ°¶Ë¿ª·¢´øÀ´¸ü¶àµÄ±ãµ±ºÍÐËȤ¡£
ÒÔÉϾÍÊÇÔÚLinuxÉÏʹÓÃVisual Studio Code¾ÙÐÐÇ°¶Ë¿ª·¢µÄÍƼöÉèÖõÄÏêϸÄÚÈÝ£¬¸ü¶àÇë¹Ø×¢±¾ÍøÄÚÆäËüÏà¹ØÎÄÕ£¡