728x90
반응형
.js, .jsx 파일들이 포멧화되도록 설정을 해보려고 함.
## PH
- 2024-09-27 : First posting.
eslint.config.js, prettier.config.js 설정 파일 작성
예전에는 .eslintrc 파일로 설정했던거 같은데, 설정 파일이 최근에 바뀐듯 함 .
eslint 는 format 에만 안맞아도 error 라고 내뱉기 때문에, 개발하면서 이것저것 꺼둔 옵션들이 많음.
```[.linenums]
// .eslintrc 파일
{
"env": {
"browser": true,
"es6": true,
"node": true
},
"root": true,
"extends": [
"airbnb",
"eslint:recommended",
"react-app",
"plugin:react/recommended",
"plugin:import/recommended",
"plugin:jsx-a11y/recommended",
"plugin:react-hooks/recommended",
"prettier",
"plugin:prettier/recommended"
],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": ["error", { "endOfLine": "auto" }],
"no-restricted-globals": "off",
"no-lone-blocks": "off",
"no-unused-vars": "off",
"react/react-in-jsx-scope": "off",
"react/jsx-uses-react": "off",
"import/extensions": "off",
"no-bitwise": "off",
"consistent-return": "off",
"react/prop-types": "off",
"jsx-a11y/click-events-have-key-events": "off",
"jsx-a11y/no-static-element-interactions": "off",
"jsx-a11y/no-noninteractive-element-interactions": "off",
"jsx-a11y/label-has-associated-control": [2, { "some": ["nesting", "id"] }],
"guard-for-in": "off",
"no-underscore-dangle": "off",
"camelcase": "off"
}
}
```/
```[.scrollable]
// eslint.config.js
import globals from "globals";
import pluginJs from "@eslint/js";
import pluginReact from "eslint-plugin-react";
import eslintPluginReactHooks from "eslint-plugin-react-hooks";
import eslintPluginImport from "eslint-plugin-import";
import eslintConfigPrettier from "eslint-config-prettier";
import eslintPluginPrettier from "eslint-plugin-prettier";
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
export default [
{
files: ["./src/**/*.{js,mjs,cjs,jsx}"],
ignores: ["./node_modules/**/*.*"]
},
{languageOptions: { globals: globals.browser }},
pluginJs.configs.recommended,
pluginReact.configs.flat.recommended,
eslintPluginReactHooks,
eslintPluginImport,
eslintConfigPrettier,
eslintPluginPrettier,
eslintPluginPrettierRecommended,
{
"plugins": ["prettier"],
"extends": ["eslint:recommended", "plugin:prettier/recommended"],
"rules": {
"prettier/prettier": "error"
}
}
];
```/
```[.scrollable]
// prettier.config.js
export default {
/**
* @template: bracketSpacing: <'always'| 'avoid'>
* 화살표 함수가 하나의 매개변수를 받을 때 괄호 사용여부
* always : 괄호 사용
* avoid : 괄호 제거
*/
"arrowParens": "avoid",
/**
* @template: jsxBracketSameLine: <bool>
* @description: ">" 다음 줄에 혼자 있는 대신 여러 줄 JSX 요소를 마지막 줄 끝에 넣습니다
* true: 줄넘김하지 않음
* false: 줄넘김을 수행
*/
"bracketSameLine": true,
/**
* @template: bracketSpacing: <bool>
* @description: 개체 리터럴에서 대괄호 사이의 공백을 넣을지 여부
* true: 공백을 넣음 { foo: bar }
* false: 공백을 제외 {foo: bar}
*/
"bracketSpacing": true,
/**
* @template: trailingComma: "<es5|none|all>"
* @description: 객체나 배열을 작성하여 데이터를 넣을때, 마지막에 후행쉼표를 넣을지 여부
* es5: 후행쉼표 제외
* none: 후행쉼표 없음
* all: 후행쉼표 포함
*/
"trailingComma": "all",
/**
* @template: singleQuote: <bool>
* @description: 큰따옴표("") 대신 작은따옴표('') 사용여부
* true: 홀따옴표로 사용
* false: 큰따옴표로 사용
*/
"singleQuote": true,
/**
* @template: semi: <bool>
* @description: 명령문의 끝에 세미콜론(;)을 인쇄합니다.
* true: (;)를 추가함
* false: (;)를 지움
*/
"semi": true,
/**
* @template: useTabs: <bool>
* @description: 탭 사용 여부
*/
"useTabs": true,
/**
* @template: tabWidth: <int>
* @description: 들여쓰기 너비 수
*/
"tabWidth": 2,
/**
* @template: printWidth: <int>
* @description: 코드 한줄 너비
*/
"printWidth": 120,
/**
* @description: EoF 방식
*/
"endOfLine": "auto",
};
```/
## RRA
728x90
반응형
