Language-tools: VS Code๋Š” ์œ ํ˜• ์ฃผ์„์— ์˜ค๋ฅ˜๋ฅผ ํ‘œ์‹œํ•ฉ๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2020๋…„ 05์›” 20์ผ  ยท  5์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: sveltejs/language-tools

Svelte Beta ํ™•์žฅ์ด ์„ค์น˜๋˜์–ด ์žˆ๊ณ  ์–ธ์–ด ์„œ๋ฒ„๋ฅผ ๋‹ค์‹œ ์‹œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค. ๋‚ด svelte.config.js :

const sveltePreprocess = require('svelte-preprocess');

module.exports = {
    preprocess: sveltePreprocess(),
};

๊ทธ๋Ÿฌ๋‚˜ ํ™•์žฅ์€ VS Code๊ฐ€ ๋‚ด ์ฝ”๋“œ๊ฐ€ Typescript๋ผ๋Š” ๊ฒƒ์„ ์ดํ•ดํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋˜์ง€ ์•Š๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์œ ํ˜• ์ฃผ์„์— ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

์œ ํ˜• ์ฃผ์„์€ TypeScript ํŒŒ์ผ์—์„œ๋งŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ

Screen Shot 2020-05-19 at 8 24 24 PM

๋˜ํ•œ ํฅ๋ฏธ๋กญ๊ฒŒ๋„ lang="typescript" ๋ฅผ type="text/typescript" ๋กœ ๋ณ€๊ฒฝํ•˜๋ฉด ๊ตฌ๋ฌธ ์ƒ‰์ƒ์ด ์™„์ „ํžˆ ์‚ฌ๋ผ์ง€๊ณ  ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

Screen Shot 2020-05-19 at 8 26 22 PM

์‹œ์Šคํ…œ(๋‹ค์Œ ์ •๋ณด๋ฅผ ์ž‘์„ฑํ•˜์‹ญ์‹œ์˜ค):

  • OS: macOS ์นดํƒˆ๋ฆฌ๋‚˜ 10.15.4
  • IDE: VS ์ฝ”๋“œ
  • ํ”Œ๋Ÿฌ๊ทธ์ธ: Svelte ๋ฒ ํƒ€

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

์•„, ๊ทธ๋ž˜์„œ ๋ฌธ์ œ๋Š” ๋‚ด VS ์ฝ”๋“œ "์‚ฌ์šฉ์ž"์„ค์ •์— ์ด๊ฒƒ์„ ๊ฐ€์ง€๊ณ  ์žˆ์—ˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

  "files.associations": {
    "*.svelte": "html"
  },

์ด์ œ ์ œ๊ฑฐํ•œ ํ›„ ๋ชจ๋“  ๊ฒƒ์ด ์ž˜ ์ž‘๋™ํ•˜๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  5 ๋Œ“๊ธ€

์—ฌ๊ธฐ์— ์ „์ฒด ํŒŒ์ผ์˜ ์ฝ”๋“œ๋ฅผ ๊ฒŒ์‹œํ•˜๊ฑฐ๋‚˜ ์˜ˆ์ œ ๋ฆฌํฌ์ง€ํ† ๋ฆฌ๋ฅผ ๊ฒŒ์‹œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ์žฌ์ƒ์‚ฐํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ๋ชจ๋“  ์Šคํฌ๋ฆฝํŠธ๋ฅผ ํฌํ•จํ•  ํ•„์š”๋Š” ์—†์ง€๋งŒ ๋‹ค๋ฅธ ์ตœ์ƒ์œ„ ํƒœ๊ทธ๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

๋‹ค์Œ์€ ์ตœ์†Œํ•œ์˜ ์žฌ์ƒ์‚ฐ์ž…๋‹ˆ๋‹ค.

<script lang="typescript">
    let countExcludingUser: number = 0;
</script>

<p>Hi</p>

Screen Shot 2020-05-19 at 8 53 22 PM

Svelte Beta๋ฅผ ์ œ์™ธํ•œ ๋ชจ๋“  ํ™•์žฅ์„ ๋น„ํ™œ์„ฑํ™”ํ•˜๊ณ  VS Code๋ฅผ ๋‹ค์‹œ ์‹œ์ž‘ํ–ˆ์ง€๋งŒ ์„ฑ๊ณตํ•˜์ง€ ๋ชปํ–ˆ์Šต๋‹ˆ๋‹ค.

๋‚˜๋Š” ํ•œ ๋ฒˆ๋งŒ ์žฌ์ƒ์‚ฐํ•˜๊ณ  ๊ทธ ์ดํ›„์—๋Š” ์šด์ด ์—†์—ˆ์Šต๋‹ˆ๋‹ค. ์ตœ์‹  ๋นŒ๋“œ 99.0.22๋กœ ๋‹ค์‹œ ์‹œ๋„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ์ด ๋ฒ„์ „์—๋Š” ์ „์ฒ˜๋ฆฌ์— ๋Œ€ํ•œ ์—…๋ฐ์ดํŠธ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜๋„ ์ง€์†๋˜๋ฉด ์˜ˆ์ œ ์ €์žฅ์†Œ๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

๊ท€ํ•˜์˜ ์„ค๋ช…์—์„œ SveltePlugin.ts ๋Š” "์˜ˆ๊ธฐ์น˜ ์•Š์€ ํ† ํฐ"๊ณผ ๊ฐ™์€ Svelte ๊ตฌ๋ฌธ ์˜ค๋ฅ˜๊ฐ€ ์—†๊ธฐ ๋•Œ๋ฌธ์— Typescript๋กœ ์‚ฌ์ „ ์ฒ˜๋ฆฌํ•ด์•ผ ํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๋ฐ˜๋ฉด์— TypescriptPlugin.ts ๋Š” - ์–ด๋–ค ์ด์œ ์—์„œ์ธ์ง€ - ์‚ฌ์šฉ์ž๊ฐ€ Typescript๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ์ธ์‹ํ•˜์ง€ ๋ชปํ•˜์ง€๋งŒ ๋Œ€์‹  Javascript๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์ •๋ง ์ด์ƒํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ์ œ repo๊ฐ€ โ€‹โ€‹ํ™•์‹คํžˆ ๋„์›€์ด ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์•„, ๊ทธ๋ž˜์„œ ๋ฌธ์ œ๋Š” ๋‚ด VS ์ฝ”๋“œ "์‚ฌ์šฉ์ž"์„ค์ •์— ์ด๊ฒƒ์„ ๊ฐ€์ง€๊ณ  ์žˆ์—ˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

  "files.associations": {
    "*.svelte": "html"
  },

์ด์ œ ์ œ๊ฑฐํ•œ ํ›„ ๋ชจ๋“  ๊ฒƒ์ด ์ž˜ ์ž‘๋™ํ•˜๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰