{"id":615,"date":"2019-04-25T23:51:08","date_gmt":"2019-04-25T14:51:08","guid":{"rendered":"https:\/\/amati.io\/?p=615"},"modified":"2019-04-25T23:51:08","modified_gmt":"2019-04-25T14:51:08","slug":"vs-code-extension-for-fe","status":"publish","type":"post","link":"https:\/\/blog.neue.nz\/?p=615","title":{"rendered":"VS CODE extension for FE"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">\uc804\ud1b5\uc801\uc73c\ub85c Javascript \uac1c\ubc1c \ud658\uacbd\uc740 java\ucc98\ub7fc \ubcf5\uc7a1\ud55c IDE \ub300\uc2e0\uc5d0 \ub9e4\uc6b0 \uac00\ubcbc\uc6b4 \uc5d0\ub514\ud130\ub85c\ub3c4 \ucda9\ubd84\ud588\uc2b5\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \ud604\ub300\uc5d0\ub294 frontend \uac1c\ubc1c\uc758 \uc8fc\ucd95\uc774 \ub418\uba74\uc11c \ub9e4\uc6b0 \ubcf5\uc7a1\ud574\uc84c\uae30 \ub54c\ubb38\uc778\uc9c0  <a rel=\"noreferrer noopener\" aria-label=\"Webstorm (opens in a new tab)\" href=\"https:\/\/www.jetbrains.com\/webstorm\/\" target=\"_blank\">Webstorm<\/a>\uacfc \uac19\uc740 \uac15\ub825\ud55c IDE\ub85c \uac1c\ubc1c\ud558\ub294 \uacbd\uc6b0\ub3c4 \ub9ce\uc544\uc84c\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uac1c\ubc1c\uc790\uc5d0 \ub530\ub77c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \uac1c\ubc1c\ud658\uacbd\uc740 \uc0c8\ub86d\uace0 \uac15\ub825\ud55c IDE\ub97c \uc0ac\uc6a9\ud558\ub294 \ud658\uacbd, \uc804\ud1b5\uc801\uc778 \uac04\ub2e8\ud55c \uc5d0\ub514\ud130\ub97c \uadf8\ub300\ub85c \uc0ac\uc6a9\ud558\ub294 \ud658\uacbd&#8230; \uc774\ub807\uac8c \ub450 \ubd84\ub958\ub85c \ub098\ub220\uc838 \uc788\ub2e4\uace0 \uc0dd\uac01\ud558\ub294\ub370\uc694, \ubb3c\ub860 \uc774\uac83\uc740 \uac1c\ubc1c \uc0c1\ud669, \uc870\uc9c1\uc758 \uc0c1\ud669, \uadf8\ub9ac\uace0 \uac1c\uc778\uc758 \ucde8\ud5a5\uc73c\ub85c \uc5b4\ub5a4 \uac83\uc774\ub4e0 \uc120\ud0dd\ud560 \uc218 \uc788\uc8e0.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Webstorm\uc774 IDE\uacc4\uc758 \uc655\uc88c\uc5d0 \uc788\ub2e4\uace0 \ud55c\ub2e4\uba74, <a rel=\"noreferrer noopener\" aria-label=\"Visual Studio Code (opens in a new tab)\" href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\">Visual Studio Code<\/a>(\uc904\uc5ec\uc11c vscode)\ub294 \uac00\ubcbc\uc6b4 \uc5d0\ub514\ud130\ub97c \uc120\ud638\ud558\ub294 \uac1c\ubc1c\uc790\uc5d0\uac8c \uc788\uc5b4 <span style=\"color:#cf2e2e\" class=\"tadv-color\">\ub05d\ud310\uc655<\/span>\uc774\ub77c\uace0 \ud574\ub3c4 \uacfc\uc5b8\uc774 \uc544\ub2c8\ub77c\uace0 \uc0dd\uac01\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">microsoft\uc5d0\uc11c \uac1c\ubc1c\ud558\uace0 \uc788\uc73c\uba70, Update log\uc5d0 \uc18c\uac1c\ub418\ub294 \ucd94\uac00 \uae30\ub2a5\uc744 \ub530\ub77c\uac00\uae30 \ud798\ub4e4 \uc815\ub3c4\ub85c \uc5c5\ub370\uc774\ud2b8\uac00 \ud65c\ubc1c\ud55c \uac83\uc774 \uc7a5\uc810\uc785\ub2c8\ub2e4. \uc544\ub9c8 editplus, sublime text, atom \ub4f1\uc744 \uc0ac\uc6a9\ud558\ub358 \ubd84\ub4e4\ub3c4 vscode\ub85c \ub9ce\uc774 \uc774\ub3d9\ud588\uc744 \uac70\ub77c\uace0 \uc0dd\uac01\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blog.neue.nz\/wp-content\/uploads\/2019\/04\/vscode-png.png\" alt=\"\" class=\"wp-image-894\" width=\"226\" height=\"247\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\ub610\ud55c vscopde\ub294 \ud50c\ub7ec\uadf8\uc778\uc73c\ub85c \uc644\uc131\ub418\ub294 \uc5d0\ub514\ud130\uc774\uae30\uc5d0, \uadf8\ub3d9\uc548 \uc0ac\uc6a9\ud588\ub358 \ud50c\ub7ec\uadf8\uc778 \uc911 \ub098\ub984 \ucd94\ucc9c\ud558\ub294 \ud50c\ub7ec\uadf8\uc778\uc744 \uc18c\uac1c\ud574\ubcf4\ub824\uace0 \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\ucd94\ucc9c \ud50c\ub7ec\uadf8\uc778<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=MS-CEINTL.vscode-language-pack-ko\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Korean Language Pack for Visual Studio Code (opens in a new tab)\">Korean Language Pack for Visual Studio Code<\/a><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">\ub2f9\uc5f0\ud558\uaca0\uc9c0\ub9cc, \ud55c\uad6d\uc5b4 \uc5b8\uc5b4\ud329\uc740 \ud55c\uad6d\uc778 \uac1c\ubc1c\uc790\ub77c\uba74 \ud544\uc218\uc801\uc785\ub2c8\ub2e4. \uc6d0\ub798 \ub2e4\uad6d\uc5b4\uac00 vscode\uc5d0 \ub0b4\uc7a5\ub418\uc5b4 \uc788\uc5c8\uc9c0\ub9cc, \uc5b8\uc820\uac00\ubd80\ud130 \uc5b8\uc5b4\ud329\uc744 \ubcc4\ub3c4\ub85c \uc124\uce58\ud558\ub294 \ubc29\ud5a5\uc73c\ub85c \uc218\uc815\ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><a rel=\"noreferrer noopener\" aria-label=\"editorconfig for vscode (opens in a new tab)\" href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=EditorConfig.EditorConfig\" target=\"_blank\">editorconfig for vscode<\/a><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\"><a rel=\"noreferrer noopener\" aria-label=\"editorconfig (opens in a new tab)\" href=\"https:\/\/editorconfig.org\/\" target=\"_blank\">editorconfig<\/a>\uc5d0 \ub300\ud55c vscode\uc758 \ud50c\ub7ec\uadf8\uc778\uc785\ub2c8\ub2e4. \ub300\ubd80\ubd84\uc758 IDE, editor\uc5d0\uc11c\ub294 \uc5b4\ub5a4 \ubc29\ubc95\uc774\ub4e0 editorconfig\ub97c \uc9c0\uc6d0\ud558\ub294\ub370 vscode\uc758 \uacbd\uc6b0\uc5d4 \ud50c\ub7ec\uadf8\uc778\uc73c\ub85c \ubd84\ub9ac\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">.editorconfig\uc758 \uae30\ubcf8 \ud558\uc774\ub77c\uc774\ud305\uc744 \uc9c0\uc6d0\ud558\uae30\ub3c4 \ud558\uc9c0\ub9cc editorconfig\uc5d0 \uc124\uc815\ub41c \ub0b4\uc6a9\uc744 \uae30\ubc18\uc73c\ub85c vscode\uc758 editor setting\uc744 override\ud558\ub294 \uc5ed\ud560\ub3c4 \ud569\ub2c8\ub2e4. \uc5ec\ub7ec\uba85\uc774 \ud568\uaed8 \uac1c\ubc1c\ud558\ub294 \ud504\ub85c\uc81d\ud2b8\uc77c \uacbd\uc6b0\uc758 \ud658\uacbd \ucc28\uc774\ub97c \uadf9\ubcf5\ud560 \uc218 \uc788\uace0, \ud2b9\ud788 Windows\uc640 MacOS\uc758 line ending \ucc28\uc774\ub85c \uc778\ud574 \ubd88\ud544\uc694\ud558\uac8c git diff\uac00 \ubc1c\uc0dd\ud558\uae30\ub3c4 \ud558\ub294\ub370 \uc774 \ubb38\uc81c\ub97c \ud574\uacb0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><a rel=\"noreferrer noopener\" aria-label=\"ESLint (opens in a new tab)\" href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=dbaeumer.vscode-eslint\" target=\"_blank\">ESLint<\/a><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">\uc778\ud130\ub137\uc5d0\uc11c \ub530\ub85c <code>vscode plugin<\/code>\uc744 \uac80\uc0c9\ud558\uc9c0 \uc54a\uc544\ub3c4, vscode\uc758 \ud655\uc7a5 \ud0ed\uc5d0\uc11c &#8220;\uc790\uc8fc \uc0ac\uc6a9\ub418\ub294 \ud655\uc7a5 \uc21c\uc11c&#8221;\ub85c \uc815\ub82c\ud574\uc11c \uac80\uc0c9\ud560 \ub54c \uc0c1\uc704\uad8c\uc5d0 \uc788\ub294 \ud50c\ub7ec\uadf8\uc778\ub4e4\uc740 \ud544\uc218\uc801\uc785\ub2c8\ub2e4. \uadf8\uc911\uc5d0\uc11c\ub3c4 \uac00\uc7a5 \uc0c1\uc704\uad8c\uc5d0 \uc788\ub294 \ud50c\ub7ec\uadf8\uc778\uc774 \ubc14\ub85c ESLint \uc778\ub370\uc694,<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Javascript, ES6\uc758 \ucee8\ubca4\uc158, \ubb38\ubc95 \uccb4\ud06c \ub4f1\uc744 \uc218\ud589\ud560 \uc218 \uc788\uc73c\uba70, nodejs\uc758 <a rel=\"noreferrer noopener\" aria-label=\"eslint (opens in a new tab)\" href=\"https:\/\/www.npmjs.com\/package\/eslint\" target=\"_blank\">eslint<\/a> \ucef4\ud3ec\ub10c\ud2b8\uc640 \ud568\uaed8 lint (\uc815\uc801 \uac80\uc0ac) \uae30\ub2a5\uc744 \uc218\ud589\ud558\ub294 \ud50c\ub7ec\uadf8\uc778\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><a rel=\"noreferrer noopener\" aria-label=\"Prettier (opens in a new tab)\" href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=esbenp.prettier-vscode\" target=\"_blank\">Prettier<\/a><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Prettier\ub294 \uadfc\ub798 \ub098\uc628 formatter \uc911\uc5d0\uc11c\ub294 \ub9e4\uc6b0 \uac15\ub825\ud55c \ud234\uc785\ub2c8\ub2e4. \ub9ce\uc740 \uc5b8\uc5b4\uc640 \uc5d0\ub514\ud130\ub97c \uc9c0\uc6d0\ud569\ub2c8\ub2e4.<br>\ucf54\ub4dc\ub97c \uc54c\uc544\ubcf4\uae30 \uc5b4\ub835\uac8c \uc791\uc131\ud558\ub354\ub77c\ub3c4 formatting\uc744 \ud55c\ubc88 \uc2e4\ud589\ud558\uba74 \ub9e4\uc6b0 \uae54\ub054\ud558\uac8c \uc815\ub9ac\ub418\ub294\ub370\uc694, \uac1c\ubc1c\uc790\uc758 \ucde8\ud5a5\uc5d0 \ub530\ub77c\uc11c\ub294 \ub108\ubb34 \ucf54\ub4dc\uac00 \ub9ce\uc774 \ubcc0\uacbd\ub418\uae30 \ub54c\ubb38\uc5d0 \ubd88\ud638\uac00 \uc788\ub294 formatter\uc774\uae30\ub3c4 \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/i2.wp.com\/amati.io\/wp-content\/uploads\/2019\/04\/prettier-banner-light.png?fit=620%2C259&amp;ssl=1\" alt=\"\" class=\"wp-image-888\"\/><figcaption>image from <a href=\"https:\/\/prettier.io\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">https:\/\/prettier.io\/<\/a><\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\uc5ec\ub7ec \uba85\uc774 \ud568\uaed8 \uc77c\ud558\ub294 \uc870\uc9c1\uc5d0\uc11c\ub294 \ucd08\uae30 \uac1c\ubc1c\ud658\uacbd\uc744 ESLint + Prettier + editorconfig \ub85c \uc124\uc815\ud558\uace0 \uc2dc\uc791\ud558\ub294 \uac83\uc774 \uc5ec\ub7ec\ubaa8\ub85c \ud3b8\ub9ac\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=Shan.code-settings-sync\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Settings Sync (opens in a new tab)\">Settings Sync<\/a><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">vscode\uc758 \ud658\uacbd\uc124\uc815\uacfc \ud50c\ub7ec\uadf8\uc778 \ub4f1 \ubaa8\ub4e0 \uac83\uc744 \ubc31\uc5c5\ud560 \uc218 \uc788\ub294 \ud50c\ub7ec\uadf8\uc778\uc774\uba70, github gist\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \ucef4\ud4e8\ud130\ub97c \ud3ec\ub9f7\ud558\ub294 \uacbd\uc6b0, \ub610\ub294 \ub2e4\ub978 \ucef4\ud4e8\ud130\uc5d0 vscode\ub97c \ucd94\uac00\ub85c \uc124\uce58\ud558\ub294 \uacbd\uc6b0 \ub4f1\uc5d0 \ud65c\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/blog.neue.nz\/wp-content\/uploads\/2019\/04\/settings-sync.gif\" alt=\"\" class=\"wp-image-895\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">vscode\uc758 \uc804\uccb4 \uc124\uc815, \uc124\uce58\ud588\ub358 \ud50c\ub7ec\uadf8\uc778\uacfc \uac1c\ubcc4 \uc124\uc815, keymap, \uc2ec\uc9c0\uc5b4 workspace\uae4c\uc9c0 \uadf8\ub300\ub85c \ubcf5\uc6d0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><a rel=\"noreferrer noopener\" aria-label=\"gitLens (opens in a new tab)\" href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=eamodio.gitlens\" target=\"_blank\">gitLens<\/a><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774 \ud50c\ub7ec\uadf8\uc778 \uc5ed\uc2dc \ud611\uc5c5\ud560 \ub54c \uc88b\uc740 \ud50c\ub7ec\uadf8\uc778\uc778\ub370, line \ubcc4\ub85c git history\ub97c \ud655\uc778\ud560 \uc218 \uc788\ub294 \uae30\ub2a5\uc774 \ub9e4\uc6b0 \uac15\ub825\ud569\ub2c8\ub2e4. \uac15\ub825\ud55c git diff \uae30\ub2a5\ub3c4 \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/blog.neue.nz\/wp-content\/uploads\/2019\/04\/gitlens-preview.gif\" alt=\"\" class=\"wp-image-882\"\/><\/figure><\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=CoenraadS.bracket-pair-colorizer-2\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Bracket Pair Colorizer 2 (opens in a new tab)\">Bracket Pair Colorizer 2<\/a><\/h4>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/blog.neue.nz\/wp-content\/uploads\/2019\/04\/bracket-pair.png\" alt=\"\" class=\"wp-image-880\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub294 \uad04\ud638\uc758 \uc0ac\uc6a9\uc774 \ub9ce\uc544\uc11c, \ucee8\ubca4\uc158\uc744 \uc798 \uc815\ub9ac\ud558\uc9c0 \uc54a\uc73c\uba74 \ucf54\ub4dc\ub97c \uc54c\uc544\ubcf4\uae30 \uc5b4\ub835\ub2e4\ub294 \ub2e8\uc810\uc774 \uc788\ub294\ub370 \uc774\ub97c \uc870\uae08 \ubcf4\uc644\ud574\uc8fc\ub294 \ud50c\ub7ec\uadf8\uc778\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uad04\ud638\ub97c \uac01\uac01 \ub2e4\ub978 \uceec\ub7ec\ub85c \ud558\uc774\ub77c\uc774\ud305\ud558\uace0 \ucee4\uc11c\uac00 \uc704\uce58\ud588\uc744 \uacbd\uc6b0 \uac19\uc740 \uceec\ub7ec\uc758 \uc120\uc73c\ub85c \uc774\uc5b4\uc918\uc11c \uc870\uae08 \ub354 \uc54c\uc544 \ubcf4\uae30 \uc27d\uac8c \ud574\uc90d\ub2c8\ub2e4. \uc4f0\ub2e4\ubcf4\uba74 \uac00\ub054 \ub77c\uc778\uc758 \uc0c9\uc0c1\uc774 \uc5b4\uae0b\ub098\ub294 \uacbd\uc6b0\ub3c4 \uc788\uc9c0\ub9cc, \uae08\ubc29 \uc6d0\ub798\ub300\ub85c \ub3cc\uc544\uc635\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc6d0\ub798 v1 \ubc84\uc804\uc774 \uc788\uc73c\ub098 \ud604\uc7ac v2\uac00 \ud14c\uc2a4\ud2b8 \uc911(\u73fe 2020.02)\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><a rel=\"noreferrer noopener\" aria-label=\"Surround (opens in a new tab)\" href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=yatki.vscode-surround\" target=\"_blank\">Surround<\/a><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">\uc120\ud0dd\ub41c \ucf54\ub4dc \ube14\ub7ed\uc744 \uac10\uc2f8\ub294 wrapper\ub97c \uc0dd\uc131\ud574\uc90d\ub2c8\ub2e4. \ub300\ud45c\uc801\uc73c\ub85c try catch \ub85c \uac10\uc2f8\ub294 \uc791\uc5c5\uc744 \ub2e8\ucd95\ud0a4\ub85c \uc218\ud589\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/raw.githubusercontent.com\/yatki\/vscode-surround\/master\/images\/demo.gif\" alt=\"\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=formulahendry.auto-rename-tag\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Auto Rename Tag (opens in a new tab)\">Auto Rename Tag<\/a><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">html, xml\uc5d0\uc11c \ud0dc\uadf8\ub97c \uc218\uc815\ud560\ub54c \uc5ec\ub294 \ud0dc\uadf8, \ub610\ub294 \ub2eb\ub294 \ud0dc\uadf8 \uc5b4\ub290\ucabd\uc744 \uc218\uc815\ud558\ub354\ub77c\ub3c4 \ubc18\ub300\ud3b8\uc758 \ud0dc\uadf8\ub3c4 \ud568\uaed8 \uc790\ub3d9\uc73c\ub85c \uc218\uc815\ud574\uc8fc\ub294 \ud50c\ub7ec\uadf8\uc778\uc785\ub2c8\ub2e4. \ubcc4\ub3c4\uc758 \ucee4\ub9e8\ub4dc \uc2e4\ud589 \uc5c6\uc774 \uc790\ub3d9\uc73c\ub85c \uc801\uc6a9\ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">HTML\uc740 \ub2f9\uc5f0\ud558\uace0, react \uc758 jsx \ub97c \uac1c\ubc1c\ud560 \ub54c \ucef4\ud3ec\ub10c\ud2b8 \uba85\uc758 \uc218\uc815\uc5d0 \ub300\ud574\uc11c\ub3c4 \uc0dd\uc0b0\uc131 \ud5a5\uc0c1\uc758 \ud6a8\uacfc\uac00 \ud07d\ub2c8\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/amati.io\/wp-content\/uploads\/2019\/04\/auto-rename-tag-usage.gif?fit=620%2C404&amp;ssl=1\" alt=\"\" class=\"wp-image-887\"\/><\/figure><\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=aaron-bond.better-comments\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Better comments (opens in a new tab)\">Better comments<\/a><\/h4>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/blog.neue.nz\/wp-content\/uploads\/2019\/04\/better-comments.png\" alt=\"\" class=\"wp-image-879\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\ubcf4\ud1b5 \uc8fc\uc11d\uc740 \ud55c\uac00\uc9c0 \uc0c9\uc0c1\uc73c\ub85c \ud558\uc774\ub77c\uc774\ud305\ub418\uc9c0\ub9cc, \uc774 \ud50c\ub7ec\uadf8\uc778\uc744 \uc0ac\uc6a9\ud560 \uacbd\uc6b0 prefix\uc5d0 \ub530\ub77c \uc5ec\ub7ec \uc0c9\uc0c1\uc73c\ub85c \uc8fc\uc11d\uc744 \ubcf4\uc5ec\uc90d\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc0c9\uc0c1\uacfc prefix \ubaa8\ub450 \ucee4\uc2a4\ud140\ud560 \uc218 \uc788\uc9c0\ub9cc, \ub108\ubb34 \ub9ce\uc740 \uc0c9\uc0c1\uc774 \uc788\uc744 \uacbd\uc6b0\uc5d4 \uc57d\uac04\uc529 \ud558\uc774\ub77c\uc774\ud305 \uc624\ub958\uac00 \uc0dd\uae30\uae30\ub3c4 \ud558\uace0 \ud63c\ub3d9\uc774 \uc624\uae30\ub3c4 \ud558\uae30 \ub54c\ubb38\uc5d0&#8230; \uc800\uac19\uc740 \uacbd\uc6b0 <span style=\"color:#ff6900\" class=\"tadv-color\">TODO<\/span>\ub9cc \uc124\uc815\ud558\uc5ec \uc0ac\uc6a9\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><a rel=\"noreferrer noopener\" aria-label=\"Import Cost (opens in a new tab)\" href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=wix.vscode-import-cost\" target=\"_blank\">Import Cost<\/a><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">import\ud558\ub294 \ubaa8\ub4c8 \ucef4\ud3ec\ub10c\ud2b8 \ub4f1\uc758 \uc0ac\uc774\uc988\ub97c \uc606\uc5d0 \ud45c\uc2dc\ud574\uc90d\ub2c8\ub2e4. \uc0c9\uc0c1\ub3c4 \ud568\uaed8 \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/blog.neue.nz\/wp-content\/uploads\/2019\/04\/import-cost-example.gif\" alt=\"\" class=\"wp-image-884\"\/><\/figure><\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><a rel=\"noreferrer noopener\" aria-label=\"npm Intellisense (opens in a new tab)\" href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=christian-kohler.npm-intellisense\" target=\"_blank\">npm Intellisense<\/a><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">package.json\uc744 \ud1b5\ud574 \uc124\uce58\ub41c npm module \ub4e4\uc758 \uc790\ub3d9\uc644\uc131\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/blog.neue.nz\/wp-content\/uploads\/2019\/04\/npm_intellisense_auto_complete.gif\" alt=\"\" class=\"wp-image-885\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\ub610 \ucee4\ub9e8\ub4dc \ud314\ub808\ud2b8\ub97c \ud1b5\ud574\uc11c npm module\uc744 \uc778\uc2a4\ud1a8\ud558\uac70\ub098 import \ubb38\uc744 \uc790\ub3d9\uc644\uc131 \ud574\uc8fc\ub294 \uae30\ub2a5\ub3c4 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/blog.neue.nz\/wp-content\/uploads\/2019\/04\/importcommand.gif\" alt=\"\" class=\"wp-image-886\"\/><\/figure><\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=bierner.markdown-preview-github-styles\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Markdown Preview Github Styling (opens in a new tab)\">Markdown Preview Github Styling<\/a><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">markdown\uc740 \ubcc4\ub3c4\uc758 \ub3c4\uad6c \uc5c6\uc774 \ubb38\uc11c\ub97c \ubc14\ub85c \uc791\uc131\ud560 \uc218 \uc788\ub294 \ub9c8\ud06c\uc5c5 \uc5b8\uc5b4\uc758 \uc77c\uc885\uc785\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \ud45c\uc900\uc774 \uc5c6\uae30 \ub54c\ubb38\uc5d0 \uc0ac\uc774\ud2b8 \/ \ub3c4\uad6c\uc5d0 \ub530\ub77c \ubcc0\ud658\ub418\ub294 \ubc29\uc2dd\uc774\ub098 \ud45c\uc2dc \ubc29\uc2dd\uc774 \ub2e4\ub974\uace0, \ucee4\uc2a4\ud140\ud654\ub41c \ubb38\ubc95\ub3c4 \ucc28\uc774\uac00 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uac1c\ubc1c\uc790\ub77c\uba74 \ub300\ubd80\ubd84 github \uc5d0\uc11c markdown(.MD) \ud30c\uc77c\uc744 \uc811\ud558\uac8c \ub420\ud150\ub370\uc694, \uc774 \ud50c\ub7ec\uadf8\uc778\uc740 github \uc2a4\ud0c0\uc77c\ub85c markdown \ud30c\uc77c\uc744 \ubbf8\ub9ac\ubcf4\uae30\ub85c \ubcf4\uc5ec\uc90d\ub2c8\ub2e4. \uadf8\ub798\uc11c preview \ud654\uba74\uc744 \ubcf4\uba74\uc11c \ubc14\ub85c github\uc5d0 \ub300\uc751\ud558\ub294 markdown\uc744 \uc791\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/blog.neue.nz\/wp-content\/uploads\/2019\/04\/markdown-preview-example.png\" alt=\"\" class=\"wp-image-883\"\/><\/figure><\/div>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Language \/ Framework support<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">vscode\ub294 javascript \ub294 \ucc98\uc74c\ubd80\ud130 \ud558\uc774\ub77c\uc774\ud305\uc744 \uc9c0\uc6d0\ud558\uc9c0\ub9cc, \uae30\ubcf8 \ub0b4\uc7a5\ub418\uc9c0 \uc54a\uc740 \uc5b8\uc5b4\ub294 \ud50c\ub7ec\uadf8\uc778\uc73c\ub85c \uc9c0\uc6d0\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\ub9ac\uace0, \uac01\uc885 Language support plugin \uc774\uc678\uc5d0\ub3c4 \ucd5c\uadfc \ub9ce\uc740 \uc778\uae30\ub97c \uac00\uc9c0\uace0 \uc788\ub294 Vue.js, React \ub4f1\uc758 \uac1c\ubc1c\uc744 \ub3c4\uc640\uc8fc\ub294 \ud50c\ub7ec\uadf8\uc778\ub3c4 \ub9ce\uc774 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a rel=\"noreferrer noopener\" aria-label=\".gitignore (opens in a new tab)\" href=\"\/\/marketplace.visualstudio.com\/items?itemName=codezombiech.gitignore\" target=\"_blank\">.gitignore<\/a><\/li><li><a rel=\"noreferrer noopener\" aria-label=\"SASS \/ SCSS (opens in a new tab)\" href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=Syler.sass-indented\" target=\"_blank\">SASS \/ SCSS<\/a><\/li><li><a rel=\"noreferrer noopener\" aria-label=\"Vetur for Vue.js (opens in a new tab)\" href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=octref.vetur\" target=\"_blank\">Vetur for Vue.js<\/a><\/li><li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=msjsdiag.vscode-react-native\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"React native tools (opens in a new tab)\">React native tools<\/a><\/li><li><a rel=\"noreferrer noopener\" aria-label=\"FreeMarker (opens in a new tab)\" href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=dcortes92.FreeMarker\" target=\"_blank\">FreeMarker<\/a><\/li><li><a rel=\"noreferrer noopener\" aria-label=\"mustache (opens in a new tab)\" href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=dawhite.mustache\" target=\"_blank\">mustache<\/a><\/li><li><a rel=\"noreferrer noopener\" aria-label=\"handlebars (opens in a new tab)\" href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=andrejunges.Handlebars\" target=\"_blank\">handlebars<\/a><\/li><li>&#8230;<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\ud14c\ub9c8<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\ud14c\ub9c8\ub294 \uad6c\uae00\uc5d0\uc11c <code>vscode theme<\/code>\ub85c\ub9cc \uac80\uc0c9\ud574\ub3c4 <em>best theme in 2019<\/em> \ub958\uc758 \uc544\ud2f0\ud074\uc744 \uc27d\uac8c \ucc3e\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub7f0 \uae00\uc744 \ud1b5\ud574\uc11c \uc5ec\ub7ec \ud14c\ub9c8\ub97c \uc124\uce58\ud574\ubcf4\uace0 \uc790\uc2e0\uc774 \ub9d8\uc5d0 \ub4dc\ub294 \uac83\uc744 \ucc3e\uc73c\uba74 \ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc800\ub3c4 \uc5ec\ub7ec \ud14c\ub9c8\ub97c \uac70\uccd0 \uc4f0\uac8c \ub41c \uac83\uc740 <span style=\"color:#0693e3\" class=\"tadv-color\">one dark pro, monokai pro<\/span> \ub4f1\uc778\ub370\uc694, \uc774 \ud14c\ub9c8\ub4e4\uc740 \uae30\ubcf8\uc801\uc73c\ub85c \uc9c0\uc6d0\uc774 \uc798 \ub418\ub294 \ud14c\ub9c8\uc774\uba70 marketplace\uc5d0\uc11c\ub3c4 \ucd5c\uc0c1\uc704\uad8c\uc5d0 \uc788\ub294 \ud14c\ub9c8\uc774\uae30\ub3c4 \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a rel=\"noreferrer noopener\" aria-label=\"One Dark Pro (opens in a new tab)\" href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=zhuangtongfa.Material-theme\" target=\"_blank\">One Dark Pro<\/a><br>github\uc758 <a href=\"https:\/\/atom.io\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"atom (opens in a new tab)\">atom<\/a> \uc5d0\ub514\ud130 \ub54c\ubb38\uc5d0 \uc720\uba85\ud574\uc9c4 \uc0c9\uc0c1 \uc870\ud569\uc785\ub2c8\ub2e4.<br><img decoding=\"async\" scale=\"0\" class=\"wp-image-889\" style=\"width: 500px;\" src=\"https:\/\/blog.neue.nz\/wp-content\/uploads\/2019\/04\/006tNbRwgy1fvwkr6i199j31kw16otat.jpg\" alt=\"\"><\/li><li><a rel=\"noreferrer noopener\" aria-label=\"Monokai Pro (opens in a new tab)\" href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=monokai.theme-monokai-pro-vscode\" target=\"_blank\">Monokai Pro<\/a><br>5\uac1c\uc758 \ud14c\ub9c8\uc640 5\uac1c\uc758 \ud30c\uc77c\uc544\uc774\ucf58 \ud14c\ub9c8\ub97c \uc9c0\uc6d0\ud569\ub2c8\ub2e4. \uac1c\uc778\uc801\uc73c\ub85c \uc88b\uc544\ud558\ub294 \ucee4\ud53c\uc0c9 \uc704\uc8fc\uc758 \uc0c9\uc0c1 \uc870\ud569\ub3c4 \uc788\ub294\ub370\uc694, \ub2e8\uc810\uc774 \ud558\ub098 \uc788\uc2b5\ub2c8\ub2e4. \ud14c\ub9c8 \uc790\uccb4\uc758 \uae30\ub2a5 \uc81c\ud55c\uc774 \uc5c6\ub294\ub370 \uc5c5\ub370\uc774\ud2b8 \ud560 \ub54c\uc5d0 9.95\u20ac \uc758 \uae30\ubd80 \ud31d\uc5c5\uc774 \ub728\ub294 \uac83\uc774 \uc880 \uadc0\ucc2e\uc2b5\ub2c8\ub2e4.<br><img decoding=\"async\" scale=\"0\" class=\"wp-image-890\" style=\"width: 500px;\" src=\"https:\/\/blog.neue.nz\/wp-content\/uploads\/2019\/04\/monokai-pro.png\" alt=\"\"><\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\ud30c\uc77c \uc544\uc774\ucf58 \ud14c\ub9c8<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\ud30c\uc77c \uc544\uc774\ucf58 \ud14c\ub9c8 \uc5ed\uc2dc \uac80\uc0c9\uc73c\ub85c \uad49\uc7a5\ud788 \ub9ce\uc774 \ucc3e\uc744 \uc218 \uc788\uace0, \uc0c1\uc704\uad8c\uc5d0 \uc788\ub294 \ud14c\ub9c8\ub4e4\uc774 \uc5ed\uc2dc \uc9c0\uc6d0\ub418\ub294 \ud30c\uc77c\uc758 \uc885\ub958\ub3c4 \ub9ce\uace0 \uad1c\ucc2e\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud30c\uc77c \uc544\uc774\ucf58 \ud14c\ub9c8\ub294 \uc9c0\uc6d0\ub418\ub294 \ud30c\uc77c \uc885\ub958\uac00 \uc5bc\ub9c8\ub098 \ub418\ub294\uc9c0\uac00 \uc911\uc694\ud55c\ub370\uc694, \uc8fc\ub85c vscode-icons (vscode\ud300 \uc790\uccb4 \uc81c\uc791), Material icons\uac00 \uc778\uae30\uac00 \ub9ce\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a rel=\"noreferrer noopener\" aria-label=\"vscode-icons (opens in a new tab)\" href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=vscode-icons-team.vscode-icons\" target=\"_blank\">vscode-icons<\/a><\/li><li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=PKief.material-icon-theme\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Material Icon Theme (opens in a new tab)\">Material Icon Theme<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\uc804\ud1b5\uc801\uc73c\ub85c Javascript \uac1c\ubc1c \ud658\uacbd\uc740 java\ucc98\ub7fc \ubcf5\uc7a1\ud55c IDE \ub300\uc2e0\uc5d0 \ub9e4\uc6b0 \uac00\ubcbc\uc6b4 \uc5d0\ub514\ud130\ub85c\ub3c4 \ucda9\ubd84\ud588\uc2b5\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \ud604\ub300\uc5d0\ub294 frontend \uac1c\ubc1c\uc758 \uc8fc\ucd95\uc774 \ub418\uba74\uc11c \ub9e4\uc6b0 \ubcf5\uc7a1\ud574\uc84c\uae30 \ub54c\ubb38\uc778\uc9c0 Webstorm\uacfc \uac19\uc740 \uac15\ub825\ud55c IDE\ub85c \uac1c\ubc1c\ud558\ub294 \uacbd\uc6b0\ub3c4 \ub9ce\uc544\uc84c\uc2b5\ub2c8\ub2e4. \uac1c\ubc1c\uc790\uc5d0 \ub530\ub77c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \uac1c\ubc1c\ud658\uacbd\uc740 \uc0c8\ub86d\uace0 \uac15\ub825\ud55c IDE\ub97c \uc0ac\uc6a9\ud558\ub294 \ud658\uacbd, \uc804\ud1b5\uc801\uc778 \uac04\ub2e8\ud55c \uc5d0\ub514\ud130\ub97c \uadf8\ub300\ub85c \uc0ac\uc6a9\ud558\ub294 \ud658\uacbd&#8230; \uc774\ub807\uac8c \ub450 \ubd84\ub958\ub85c \ub098\ub220\uc838 \uc788\ub2e4\uace0 \uc0dd\uac01\ud558\ub294\ub370\uc694, \ubb3c\ub860 \uc774\uac83\uc740 \uac1c\ubc1c \uc0c1\ud669, \uc870\uc9c1\uc758 \uc0c1\ud669, [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":894,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[61,134],"class_list":["post-615","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend-dev-story","tag-extension","tag-vscode"],"_links":{"self":[{"href":"https:\/\/blog.neue.nz\/index.php?rest_route=\/wp\/v2\/posts\/615","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.neue.nz\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.neue.nz\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.neue.nz\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.neue.nz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=615"}],"version-history":[{"count":0,"href":"https:\/\/blog.neue.nz\/index.php?rest_route=\/wp\/v2\/posts\/615\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.neue.nz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=615"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.neue.nz\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=615"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.neue.nz\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=615"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}