사심 ❤️을 넘치게 담아서 기록한 eslint 설정입니다.
사용 환경
- typescript
- tailwindcss
yarn add -D eslint @typescript-eslint/parser
yarn add -D eslint-plugin-unused-imports eslint-plugin-import
yarn add -D eslint-plugin-tailwindcss
touch .eslintrc.cjs
.eslintrc.cjs
module.exports = {
root: true,
extends: ['plugin:tailwindcss/recommended'],
plugins: ['unused-imports', 'import'],
parser: '@typescript-eslint/parser',
settings: {
tailwindcss: {
callees: ['cn'],
},
},
rules: {
// https://github.com/sweepline/eslint-plugin-unused-imports
'no-unused-vars': 'off',
'@typescript-eslint/no-unused-vars': 'off',
'unused-imports/no-unused-imports': 'error',
'unused-imports/no-unused-vars': [
'warn',
{
vars: 'all',
varsIgnorePattern: '^_',
args: 'after-used',
argsIgnorePattern: '^_',
},
],
// https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/order.md
'import/order': [
'error',
{
groups: ['builtin', 'external', 'internal', ['parent', 'sibling', 'index']],
alphabetize: {
order: 'asc',
caseInsensitive: true,
},
'newlines-between': 'always',
},
],
'import/first': 'error',
'import/newline-after-import': 'error',
'import/prefer-default-export': 'off',
'import/no-useless-path-segments': ['error', { noUselessIndex: true }],
// https://nextjs.org/docs/basic-features/eslint
'react-hooks/exhaustive-deps': 'off',
},
};
프론트엔드 개발환경 세팅
4 / 7
23.01.28
0분
안 해본 사람은 있어도 한 번만 하는 사람은 없다.