typescript + eslint + prettier setting

typescript

npm install --save-dev typescript @types/react @types/node
JavaScript
복사

tsconfig.json

{ "compilerOptions": { "baseUrl": "./", "jsx": "preserve", "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": false, "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "paths": { "/*": ["/*"] } }, "exclude": ["node_modules"], "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"] }
JavaScript
복사

eslint + prettier

설치

/
npm i -D eslint prettier eslint-plugin-react eslint-plugin-react-hooks eslint-config-prettier eslint-plugin-prettier eslint-plugin-jsx-a11y @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-simple-import-sort eslint \ # Eslint itself prettier \ # Prettier itself eslint-plugin-react \ # Eslint plugin for react eslint-plugin-react-hooks \ # Eslint plugin for react hooks, helps you write modern functional react components eslint-config-prettier \ # Eslint config for prettier, it will extend the style guide to match prettier eslint-plugin-prettier \ # Eslint plugin for prettier, it will raise eslint errors about formatting eslint-plugin-jsx-a11y \ # Eslint plugin to raise accessibility violation errors @typescript-eslint/eslint-plugin \ # For extending our rules to work with prettier @typescript-eslint/parser \ # To enable eslint to parse typescript code eslint-plugin-simple-import-sort \
JavaScript
복사

세팅 파일 추가

touch .eslintignore .prettierignore
JavaScript
복사
두 파일에 모두 다음을 추가한다
node_modules
JavaScript
복사
touch .eslintrc.js .prettierrc
JavaScript
복사

.eslintrc.js

module.exports = { root: true, // Make sure eslint picks up the config at the root of the directory parser: "@typescript-eslint/parser", parserOptions: { ecmaVersion: 2020, // Use the latest ecmascript standard sourceType: "module", // Allows using import/export statements ecmaFeatures: { jsx: true, // Enable JSX since we're using React }, }, settings: { react: { version: "detect", // Automatically detect the react version }, }, env: { browser: true, // Enables browser globals like window and document amd: true, // Enables require() and define() as global variables as per the amd spec. node: true, // Enables Node.js global variables and Node.js scoping. }, plugins: ["simple-import-sort"], extends: [ "eslint:recommended", "plugin:react/recommended", "plugin:jsx-a11y/recommended", "plugin:prettier/recommended", // Make this the last element so prettier config overrides other formatting rules "plugin:@typescript-eslint/eslint-recommended", "plugin:@typescript-eslint/recommended", "prettier/@typescript-eslint", ], rules: { 'prettier/prettier': ['error', {}, { usePrettierrc: true }], 'react/react-in-jsx-scope': 'off', 'react/prop-types': 'off', '@typescript-eslint/explicit-function-return-type': 'off', '@typescript-eslint/explicit-module-boundary-types": "off', 'simple-import-sort/sort': 'error', 'jsx-a11y/anchor-is-valid': [ 'error', { components: ['Link'], specialLink: ['hrefLeft', 'hrefRight'], aspects: ['invalidHref', 'preferButton'] } ] } };
JavaScript
복사

.prettierrc

{ "semi": true, "tabWidth": 2, "singleQuote": false }
JavaScript
복사