클론코딩해보기/환경 세팅
eslint + prettier 적용
js0616
2024. 8. 13. 22:17
정리
1. package.json 생성
npm init -y
2. airbnb 스타일 관련 설치
npx install-peerdeps --dev eslint-config-airbnb
3. prettier 설치
npm install --save-dev prettier eslint-plugin-prettier eslint-config-prettier
4. .eslintrc.js 생성
// .eslintrc.js
module.exports = {
extends: [
'airbnb-base',
'plugin:prettier/recommended', // Prettier 관련 규칙 추가
],
env: {
browser: true,
node: true,
es2021: true,
},
rules: {
'no-console': 'off',
'prettier/prettier': [
'error',
{
endOfLine: 'auto',
},
],
},
};
5. .prettierrc 생성
{
"singleQuote": true,
"semi": true,
"useTabs": false,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 80,
"arrowParens": "avoid"
}
6. setting.json 설정
{
... ...
"eslint.enable": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
}
.eslintrc.js 파일 alt + a , alt + shift + f 로 정리
7. js 파일 생성 테스트
// src/app.js
console.log('dd') ;;;
console.log('1111111111111111', '2222222222222222222', '333333333333333333333', '44444444444444444444444', '5555555555555555555'); ;;;
다음과 같이 되면 적용 된것.
// src/app.js
console.log("dd");
console.log(
"1111111111111111",
"2222222222222222222",
"333333333333333333333",
"44444444444444444444444",
"5555555555555555555",
);
package.json
{
"name": "eslint_test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"eslint": "^8.2.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-prettier": "^5.2.1",
"eslint-plugin-react": "^7.28.0",
"eslint-plugin-react-hooks": "^4.3.0",
"prettier": "^3.3.3"
}
}
cli 사용시
"scripts": {
"lint": "eslint src --fix"
},
npm run lint