Language-tools: λͺ¨λ“  도ꡬ에 λŒ€ν•΄ svelte.config.js의 onwarn 및 기타 μ˜΅μ…˜ μ‚¬μš©

에 λ§Œλ“  2021λ…„ 03μ›” 03일  Β·  10μ½”λ©˜νŠΈ  Β·  좜처: sveltejs/language-tools

ν˜„μž¬ svelte의 11y 경고에 λŒ€ν•œ λ¬΄μ‹œλ₯Ό ꡬ성해야 ν•˜λŠ” μ„Έ 곳이 μžˆμŠ΅λ‹ˆλ‹€.

  1. μ–Έμ–΄ μ„œλ²„
    lua lspconfig.svelte.setup{ cmd = { "yarn", "svelteserver", "--stdio" }; on_attach = on_attach; settings = { svelte = { plugin = { svelte = { compilerWarnings = { ["a11y-no-onchange"] = "ignore" } } } } } }
  2. svelte-check , ꡬ성할 λ•Œ package.json 보기 ν‰ν•˜κ²Œ λ§Œλ“€κ³  ꡬ성할 수 μžˆλŠ” μœ μΌν•œ μž₯μ†Œμž…λ‹ˆλ‹€.

    {
      "val": "svelte-check --compiler-warnings a11y-no-onchange:ignore",
      "validate": "yarn val --threshold warning && yarn tsc --noEmit"
    }
    
  3. μ—μŠ¬λ¦°νŠΈ

    settings: {
      'svelte3/ignore-warnings': ({ code }) => code === 'a11y-no-onchange',
      // ...
    },
    

svelte.config.js ν•œ κ³³μ—μ„œ κ΅¬μ„±ν•˜κ³  μ‹ΆμŠ΅λ‹ˆλ‹€. svelte-preprocess λ•Œλ¬Έμ— ν”Όν•  수 μ—†μœΌλ©° 이 λ„κ΅¬λŠ” μ–΄μ¨Œλ“  svelte-preprocess λŒ€ν•΄ 읽고 μžˆμŠ΅λ‹ˆλ‹€. onwarn μ•Šκ² μŠ΅λ‹ˆκΉŒ?

λ˜ν•œ ν˜„μž¬ μƒν™©μ—μ„œλŠ” μ–Έμ–΄ μ„œλ²„μ— λŒ€ν•œ ν”„λ‘œμ νŠΈλ³„ ꡬ성을 λ§Œλ“€ 수 μ—†μŠ΅λ‹ˆλ‹€.

μ΄μƒμ μœΌλ‘œλŠ” μ–Έμ–΄ 도ꡬ와 λ²ˆλ“€λŸ¬ λͺ¨λ‘μ—μ„œ svelte.config.js μ‚¬μš©ν•˜κ³  κ±°κΈ°μ—μ„œ λͺ¨λ“  svelte 관련을 κ΅¬μ„±ν•˜κ³  μ‹ΆμŠ΅λ‹ˆλ‹€.
이 물건도 : https://github.com/sveltejs/language-tools/tree/master/packages/svelte-vscode#settings

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

λ‚΄ 생각에 onwarn의 μ‘°ν™”λ₯Ό μœ„ν•œ ν›„λ³΄λŠ” μ–Έμ–΄ μ„œλ²„, svelte-check, λ‘€μ—… ν”ŒλŸ¬κ·ΈμΈ, μ›ΉνŒ© ν”ŒλŸ¬κ·ΈμΈμž…λ‹ˆλ‹€.

λͺ¨λ“  10 λŒ“κΈ€

λ‚¨μžλ“€μ€ λ‚˜μ—κ²Œ 감각이 μžˆλ‹€. λ‚˜λŠ” μ–΄λ €μš΄ 뢀뢄이 λͺ…λͺ…에 λ™μ˜ν•  것이라고 μƒμƒν•©λ‹ˆλ‹€ / 그것이 μ–Όλ§ˆλ‚˜ μ •ν™•ν•˜κ²Œ μ§€μ •λ˜μ–΄μ•Ό ν•˜λŠ”μ§€

경고와 같은 μΌμ—λŠ” μ˜λ―Έκ°€ μžˆμŠ΅λ‹ˆλ‹€. λ‚˜λŠ” λͺ¨λ“  μ–Έμ–΄ μ„œλ²„ 섀정을 읽어야 ν•œλ‹€λŠ” 데 λ™μ˜ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. 이 섀정을 μ œκ³΅ν•˜κ³  μ–Έμ–΄ μ„œλ²„μ™€ ν†΅ν•©ν•˜λŠ” 것은 IDE의 μ±…μž„μ΄μ–΄μ•Ό ν•©λ‹ˆλ‹€.

λ”°λΌμ„œ ν˜„μž¬ ν˜•μ‹μœΌλ‘œ onwarn을 μ‚¬μš©ν•˜λŠ” 것이 ν—ˆμš©λ˜λŠ” λ°©ν–₯μž…λ‹ˆκΉŒ?
κΈ°μ‘΄ ꡬ성과 ν˜Έν™˜λ˜λ„λ‘ ν˜„μž¬ λ²ˆλ“€λŸ¬μš© svelte ν”ŒλŸ¬κ·ΈμΈμ—μ„œ μˆ˜ν–‰λ˜λŠ” κ²ƒμ²˜λŸΌ κ²½κ³ λ₯Ό κ°€λ‘œμ±„κΈ° μœ„ν•΄ μœ μ‚¬ν•œ onwarn 콜백 μΈν„°νŽ˜μ΄μŠ€λ₯Ό κ΅¬ν˜„ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

λͺ¨λ‘λŠ” μ•„λ‹ˆμ§€λ§Œ svelte.config.js 에 μ–Έμ–΄ μ„œλ²„μ— λŒ€ν•œ 일뢀 ꡬ성이 μžˆλŠ” μ΄μœ λŠ” μ΅œμ†Œν•œ ν˜•μ‹ μ˜΅μ…˜μ΄ 일반적으둜 ν”„λ‘œμ νŠΈλ³„λ‘œ κ΅¬μ„±λ˜κΈ° λ•Œλ¬Έμž…λ‹ˆλ‹€. :생각:

https://github.com/sveltejs/language-tools/tree/master/packages/svelte-vscode#sveltepluginsvelteformatenable

ν™•μž₯ ν”„λ‘œκ·Έλž¨μ€ 더 예쁜 ν”ŒλŸ¬κ·ΈμΈκ³Ό ν•¨κ»˜ 더 예쁜 ν”ŒλŸ¬κ·ΈμΈμ„ μ‚¬μš©ν•˜μ—¬ 포맷을 μˆ˜ν–‰ν•˜λ―€λ‘œ 포맷 μ˜΅μ…˜μ€ .prettierrc νŒŒμΌμ— λ„£μ–΄μ•Ό ν•©λ‹ˆλ‹€. https://www.npmjs.com/package/prettier-plugin-svelte

λ‚˜λŠ” pre-commit hook으둜 더 μ˜ˆμ˜λ‹€. ꡬ성은 package.json μžˆμŠ΅λ‹ˆλ‹€.

{
  "prettier": {
    "singleQuote": true,
    "printWidth": 80,
    "plugins": [
      "prettier-plugin-svelte"
    ]
  }
}

LS의 더 예쁜 ν˜ΈμΆœμ— νŠΉλ³„ν•œ 것이 μžˆμŠ΅λ‹ˆκΉŒ? μ•„λ‹ˆλ©΄ ν‰μ†Œμ²˜λŸΌ 이 ꡬ성을 λ‘œλ“œν•΄μ•Ό ν•©λ‹ˆκΉŒ? :생각:

이것도 νš¨κ³Όκ°€ μžˆμ„ κ²ƒμž…λ‹ˆλ‹€. λ‚΄ μš”μ μ€ μ„œμ‹ μ˜΅μ…˜μ΄ svelte.config.js 의 관심사가 λ˜μ–΄μ„œλŠ” μ•ˆ λœλ‹€λŠ” κ²ƒμž…λ‹ˆλ‹€.

λ™μ˜ν•©λ‹ˆλ‹€. 이제 onwarn 외에 ν•©λ¦¬μ μœΌλ‘œ svelte.config.js 둜 μ΄λ™ν•˜λŠ” 것 외에 λ‹€λ₯Έ 것은 보이지 μ•ŠμŠ΅λ‹ˆλ‹€.

남은 결정이 λ³„λ‘œ μ—†μŠ΅λ‹ˆλ‹€.

λͺ¨λ“  λ„κ΅¬μ—μ„œ onwarn μ½œλ°±μ„ λ§Œλ“œλŠ” 것이 쒋은 μ†”λ£¨μ…˜μ²˜λŸΌ λ“€λ¦½λ‹ˆκΉŒ?
λ²ˆλ“€λŸ¬μ˜ ν˜„μž¬ ꡬ성과 ν˜Έν™˜λ˜λŠ” 톡합 ꡬ성.

λ‚˜λŠ” 이미 잘 ν™•λ¦½λœ ꡬ성 λ©”μ»€λ‹ˆμ¦˜μ΄ μžˆλŠ” 것듀에 svelte.config.js 지원을 μΆ”κ°€ν•˜λŠ” 것에 λŒ€ν•΄ μš°λ €ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€. 예λ₯Ό λ“€μ–΄ ESLintμ—μ„œ ν”ŒλŸ¬κ·ΈμΈμ€ ESLintκ°€ 이미 λ‘œλ“œν•œ ꡬ성 개체λ₯Ό μ „λ‹¬ν•©λ‹ˆλ‹€. 이것은 μ—¬λŸ¬ 계측적 .eslintrc.js 파일(λ˜λŠ” JSON 파일, YAML 파일 λ˜λŠ” package.json 파일의 eslintConfig ν‚€ λ‚΄μš©)을 λ³‘ν•©ν•œ 결과일 수 μžˆμŠ΅λ‹ˆλ‹€. ESLintκ°€ μ΄λŸ¬ν•œ 파일이 μžˆλŠ” μœ„μΉ˜λ₯Ό ν”ŒλŸ¬κ·ΈμΈμ— μ•Œλ €μ£Όμ§€ μ•ŠλŠ”λ‹€κ³  μƒκ°ν•˜λ―€λ‘œ ν”ŒλŸ¬κ·ΈμΈμ΄ svelte.config.js λ₯Ό μ°Ύμ•„μ•Ό ν•˜λŠ” μœ„μΉ˜λ₯Ό λͺ¨λ₯΄κ² μŠ΅λ‹ˆλ‹€. ꡬ성을 μ²˜λ¦¬ν•˜λŠ” 단일 톡합 방법이 있으며 ESLint μ½”μ–΄κ°€ 이λ₯Ό λ‹΄λ‹Ήν•˜λ €κ³  ν•©λ‹ˆλ‹€.

λ”°λΌμ„œ μ†”λ£¨μ…˜μ€ λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.

  1. λ‚΄ LS ν΄λΌμ΄μ–ΈνŠΈκ°€ μž‘μ—… κ³΅κ°„μ—μ„œ ꡬ성 νŒŒμΌμ„ 읽고 svelte-vscode 처럼 ꡬ성을 LS에 μ „λ‹¬ν•˜λ„λ‘ κ°€λ₯΄μΉ©λ‹ˆλ‹€.
  2. svelte.config.js μ—μ„œ ꡬ성을 κ°€μ Έμ™€μ„œ .eslintrc.js μ–΄λ–»κ²Œλ“  μ‚¬μš©ν•˜μ‹­μ‹œμ˜€. λ¬΄μ‹œλ‘œ λͺ©λ‘μ„ λ§Œλ“€κ³  두 κΈ°λŠ₯ λ˜λŠ” λ¬΄μ–Έκ°€μ—μ„œ μ‚¬μš©ν•˜μ‹­μ‹œμ˜€.
  3. svelte-check μ—κ²Œ μž‘μ—… κ³΅κ°„μ—μ„œ ꡬ성을 λ‘œλ“œν•˜λ„λ‘ κ°€λ₯΄μΉ©λ‹ˆλ‹€.

μˆ˜μ •ν•  κ°€μΉ˜κ°€ μžˆλŠ” 것은 svelte-check 뿐인 것 κ°™μŠ΅λ‹ˆλ‹€. 그러면 ?

svelte-check μ™Έμ—λŠ” μ‚¬μš©μž μ˜μ—­μ—μ„œ κ°€λŠ₯ν•œ 것 κ°™μŠ΅λ‹ˆλ‹€. :생각:

λ‚΄ 생각에 onwarn의 μ‘°ν™”λ₯Ό μœ„ν•œ ν›„λ³΄λŠ” μ–Έμ–΄ μ„œλ²„, svelte-check, λ‘€μ—… ν”ŒλŸ¬κ·ΈμΈ, μ›ΉνŒ© ν”ŒλŸ¬κ·ΈμΈμž…λ‹ˆλ‹€.

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰