×ðÁú¿­Ê±

ÔÚ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¾ÙÐÐÇ°¶Ë¿ª·¢µÄÍƼöÉèÖõÄÏêϸÄÚÈÝ £¬¸ü¶àÇë¹Ø×¢±¾ÍøÄÚÆäËüÏà¹ØÎÄÕ£¡

ÃâÔð˵Ã÷£ºÒÔÉÏչʾÄÚÈÝȪԴÓÚÏàÖúýÌå¡¢ÆóÒµ»ú¹¹¡¢ÍøÓÑÌṩ»òÍøÂçÍøÂçÕûÀí £¬°æȨÕùÒéÓë±¾Õ¾ÎÞ¹Ø £¬ÎÄÕÂÉæ¼°¿´·¨Óë¿´·¨²»´ú±í×ðÁú¿­Ê±ÂËÓÍ»úÍø¹Ù·½Ì¬¶È £¬Çë¶ÁÕß½ö×ö²Î¿¼¡£±¾ÎĽӴýתÔØ £¬×ªÔØÇë˵Ã÷À´ÓÉ¡£ÈôÄúÒÔΪ±¾ÎÄÇÖÕ¼ÁËÄúµÄ°æȨÐÅÏ¢ £¬»òÄú·¢Ã÷¸ÃÄÚÈÝÓÐÈκÎÉæ¼°ÓÐÎ¥¹«µÂ¡¢Ã°·¸Ö´·¨µÈÎ¥·¨ÐÅÏ¢ £¬ÇëÄúÁ¬Ã¦ÁªÏµ×ðÁú¿­Ê±ÊµÊ±ÐÞÕý»òɾ³ý¡£

Ïà¹ØÐÂÎÅ

ÁªÏµ×ðÁú¿­Ê±

18523999891

¿É΢ÐÅÔÚÏß×Éѯ

ÊÂÇéʱ¼ä£ºÖÜÒ»ÖÁÖÜÎå £¬9:30-18:30 £¬½ÚãåÈÕÐÝÏ¢

QR code
¡¾ÍøÕ¾µØͼ¡¿¡¾sitemap¡¿