2022/11/03 - TIL

Typescript config setting

{
  "compilerOptions": {
    "target": "es2015",
    "module": "NodeNext",
    "moduleResolution": "node",
		//jsx를 사용하려면 필수로사용해야한다
    "jsx": "react-jsx",
    "jsxImportSource": "react",

    "baseUrl": "./src",
    "typeRoots": ["node_modules/@types", "./src/types"],

    "allowJs": true,
    "noEmit": true,

    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,

    "forceConsistentCasingInFileNames": true,

    "strict": true,

    "skipLibCheck": true
  }
}

typeRoots에는 something.d.ts와 같이 타입을 모아두는 폴더들을 넣어둘 수 있다.

vscode settings.json

"typescript.validate.enable" : true

webpack/common.js

//생성할 파일
entry: {
    main: resolve("src/main.jsx"),
    app: resolve("src/app.jsx"),
  },
  output: {
    path: resolve("public"),
    filename: "[name].bundle.js",
  },
  resolve: {
    extensions: [".tx",".js", ".jsx", ".json", ".wasm"],
  },

.prettierrc.cjs

module.exports = {
  // 화살표 함수 식 매개변수 () 생략 여부 (ex: (a) => a)
  arrowParens: 'always',
  // 닫는 괄호(>) 위치 설정
  // ex: <div
  //       id="unique-id"
  //       class="contaienr"
  //     >
  htmlWhitespaceSensitivity: 'css',
  bracketSameLine: false,
  // 객체 표기 괄호 사이 공백 추가 여부 (ex: { foo: bar })
  bracketSpacing: true,
  // 행폭 설정 (줄 길이가 설정 값보다 길어지면 자동 개행)
  printWidth: 80,
  // 산문 래핑 설정
  proseWrap: 'preserve',
  // 객체 속성 key 값에 인용 부호 사용 여부 (ex: { 'key': 'xkieo-xxxx' })
  quoteProps: 'as-needed',
  // 세미콜론(;) 사용 여부
  semi: true,
  // 싱글 인용 부호(') 사용 여부
  singleQuote: true,
  // 탭 너비 설정
  tabWidth: 2,
  // 객체 마지막 속성 선언 뒷 부분에 콤마 추가 여부
  trailingComma: 'es5',
  // 탭 사용 여부
  useTabs: false,
};

mode module ⇒ 에서 module.export를 사용하려s면 cjs파일로 만들어야 한다.

.eslintrc.cjs

module.exports = {
	// ...
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react/jsx-runtime', =>1번
    'plugin:@typescript-eslint/recommended',
  ],
	settings: {
		react: { version: require('react/package.json').version },
	},
	rules: {
    '@typescript-eslint/no-var-requires': 'off', =>2번
  },
};

1번을 좀더 권장한다

2번의 rules 프로퍼티는, 불편한 eslint에 필요 없는 옵션들을 끌 수 있다.