각양각색config.js에서 효과적인 보충형 방법 총결

다양한 JavaScript 시스템 라이브러리의 설정 파일에서 유형 보완을 효과적으로 하기 위한 JSDoc 근사 집합입니다.VScode를 통해 확인 중입니다.
링크가 없는 것은 자신이 찾은 유형 정의입니다. 오류가 있으면 메시지를 남겨 주십시오.
다른 도서관 정보도 댓글을 환영합니다!
역사를 갱신하다

2021/04/30 stylelint.config.js 추가

수정 2021/05/05 "사용 방법"

2021/09/16 next.config.js 업데이트

2021/12/31 .eslintrc.js, .prettierrc.js 업데이트

사용법

설정 객체의 변수를 정의할 때 JSDc를 사용하여 유형을 지정하고 변수를 내보냅니다.
xxx.config.js

/** @type {設定オブジェクトの型を指定} */
const config = {
  // ここで型の補完が効くようになる
}

export default config // もしくは module.exports = config

export default 또는 module.exports에 대한 의견을 직접 표시하려면 ()로 객체를 둘러싸야 합니다.
이거 안 돼.

/** @type {設定オブジェクトの型を指定} */
export default {
  // これだと型の補完は効かない
}

이렇게 하시면 됩니다.

/** @type {設定オブジェクトの型を指定} */
export default ({
  // ここで型の補完が効くようになる
})

↑ @ginpei씨가 댓글로 알려주셨어요.대단히 감사합니다🙏
Prettier를 사용하는 경우 괄호가 사라지지 않도록 다음 순서(JSDoc 주석 후 줄 바꿈도 가능)를 따르는 것이 좋습니다.
이렇게 해도 돼.

export default /** @type {設定オブジェクトの型を指定} */ ({
  // ここで型の補完が効くようになる
})

각 구성 파일의 유형 정의

babel.config.js

babel.config.js

/** @type {import('@babel/core').TransformOptions} */

.eslintrc.js

.eslintrc.js

/** @type {import('eslint/lib/shared/types').ConfigData} */

↑ @u-sho씨가 제게 eslint에 정의된 뜻을 알려주세요.대단히 감사합니다🙏
이전 컨텐츠
별도로 설치해야 합니다@typescript-eslint/experimental-utils.@typescript-eslint/eslint-plugin@typescript-eslint/parser랑 같이 설치하면 필요없어)
.eslintrc.js

/** @type {import('@typescript-eslint/experimental-utils').TSESLint.Linter.Config} */

ref. https://zenn.dev/mstssk/articles/13c5e7c0377899

jest.config.js

jest.config.js

/** @type {import('@jest/types').Config.InitialOptions} */

ref. https://zenn.dev/mstssk/articles/13c5e7c0377899

next.config.js

next.config.js

/** @type {import('next').NextConfig} */

ref. https://nextjs.org/docs/api-reference/next.config.js/introduction
↑ @sno2wman씨가 댓글로 현행 버전이 변경되었다고 알려주세요.대단히 감사합니다🙏
v11.이전

/** @type {import('next/dist/next-server/server/config-shared').NextConfig} */

nuxt.config.js

nuxt.config.js

/** @type {import('@nuxt/types').NuxtOptions} */

ref. https://zenn.dev/k_u_0615/articles/74d093680a63ce19650b

.prettierrc.js

.prettierrc.js

/** @type {import('prettier').Options} */

↓ 새로운 형태의 정의 (2021년 11월 이후에 추가.Config,override 감사합니다.🙏
.prettierrc.js

/** @type {import('prettier').Config} */

rollup.config.js

rollup.config.js

/** @type {import('rollup').RollupOptions} */

stylelint.config.js

stylelint.config.js

/** @type {import('stylelint').Configuration} */

↑ @pvcressin씨가 댓글에 알려주셨어요.대단히 감사합니다🙏

tailwind.config.js

별도로 설치해야 합니다@types/tailwindcss.
tailwind.config.js

/** @type {import('@types/tailwindcss/tailwind-config').TailwindConfig} */

ref. https://zenn.dev/ryonakae/articles/a0ba5ab7fd7a03

vetur.config.js

별도로 설치해야 합니다vls.
vetur.config.js

/** @type {import('vls').VeturConfig} */

ref. https://vuejs.github.io/vetur/guide/setup.html#advanced

vite.config.js

vite.config.js

/** @type {import('vite').UserConfig} */

또는 defineConfig 함수를 사용하면 JSDoc 없이 유형의 보충을 완성할 수 있습니다.
vite.config.js

import { defineConfig } from 'vite';

export default defineConfig({
  // ...
})

ref. https://vitejs.dev/config/#config-intellisense

vue.config.js

vue.config.js

/** @type {import('@vue/cli-service').ProjectOptions} */

ref. https://cli.vuejs.org/config/#vue-config-js

webpack.config.js

webpack.config.js

/** @type {import('webpack').Configuration} */

ref. https://qiita.com/akameco/items/e12377e55e379d29636e
2021년 4월까지 정의형 파일이 첨부돼 설치할 필요가 없다@types/webpack.