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
복사