velog.io/@josworks27/ESLint-Prettier-%EC%84%A4%EC%A0%95-%EB%B0%B1%EC%97%94%EB%93%9C
VSCode를 통한 ESLint 와 Prettier 설정(빠르게)
1. VSCode, Node.js 설치
2. VSCode - 마켓플레이스
=> ESLint , Formatter 설치
3. 터미널 실행
ESLint 설치
npm install eslint --save-dev
Prettier 설치
npm install prettier --save-dev --save-exact
추가모듈설치
npm install eslint-config-prettier --save-dev
npm install eslint-plugin-prettier --save-dev
eslint-config-prettier는 Prettier와 ESLint를 함께 사용하기 위해 충돌하는 설정 맞춰준다.
eslint-plugin-prettier는 IDE에서 사용한 코드 포맷을 prettier로 하기 위한 모듈이다.
4. .eslintrc.js 생성
=> 터미널 실행
=> eslint --init
=> 설정 후 js파일로 생성
5..eslintrc.js 설정
module.exports = {
env: {
browser: true,
es2020: true,
node: true,
},
extends: ['eslint:recommended', 'plugin:prettier/recommended'],
parserOptions: {
ecmaVersion: 11,
sourceType: 'module',
parser: 'babel-eslint',
},
plugins: ['prettier'],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-unused-vars': 'off',
'vue/no-unused-components': 'off', // 미사용 변수 체크 해제,
'prettier/prettier': [
'error',
{
singleQuote: true,
semi: true,
useTabs: true,
tabWidth: 2,
trailingComma: 'all',
printWidth: 80,
bracketSpacing: true,
arrowParens: 'avoid',
endOfLine: 'auto',
},
],
},
};
'설정' 카테고리의 다른 글
window 계정 비밀번호 까먹었을 때 (0) | 2022.06.11 |
---|---|
git 명령어 (0) | 2020.08.05 |
visual studio plugin 추천(vue 작업시) (0) | 2020.01.04 |
Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style 오류 해결방법 (0) | 2019.11.20 |
v-bind, v-on, v-model (0) | 2019.11.09 |