TIL
- postman : Api 테스트 도구
😊 프로젝트 환경 구성 ESLint, Prettier
-
vue-cli 버전 확인
: vue --version -
vue 프로젝트 시작
: vue create 프로젝트 명 -
Preset : 플러그인들의 집합을 의미
-
unit testing, 테스트 도구 Jest
-
dedicated config files : 프로젝트를 구성하는 기능들의 설정 각각의 설정파일로 구성
-
package.json : 프로젝트를 구성하는 기능들의 설정을 하나의 파일로 구성
-
✨ ESLint 화면에 오버레이되지 않게 설정하기
: 프로젝트 폴더에 vue.config.js 파일 생성 후 다음과 같이 코드 작성
module.exports = {
devServer: {
overlay: false
}
}: 웹팩 dev server의 오버레이 속성을 사용하지 않도록 설정하는 것.
: ✨ 설정 파일을 변경했을 경우, 서버를 다시 껐다 키는 것이 좋다.
=> 웹팩 dev server 참고
: https://joshua1988.github.io/webpack-guide/devtools/webpack-dev-server.html
-
✨ ESLint : 자바스크립트에서 에러가 날 가능성이 있는 코드를 검사하는 도구, 자바스크립트 코드 문법 검사 도구
ESLint 설정 파일 : .eslintrc.js
rules : {} 안에 규칙 추가 -
✨ ESLint 설정파일 rules안에 Prettier의 설정 파일을 넣어줘야 하는 이유
ESLint가 우선시 되어야하고, ESLint의 rules와 충돌이 일어날 수 있기 때문이다.
-
✨ 이번 프로젝트에 설정한 Prettier 규칙
"prettier/prettier": [
"error",
{
singleQuote: true,
semi: true,
useTabs: true,
tabWidth: 2,
trailingComma: true,
printWidth: 80,
bracketSpacing: true,
arrowParens: "avoid",
},
],: "error"로 설정하면, Prettier 규칙에 맞지 않을 경우, 빨간 밑줄이 그어지게 된다.
=> Prettier 옵션 확인 : https://prettier.io/docs/en/options.html
-
Prettier를 사용하면 좋은 점 : 여러 사람이 코드를 일관된 방식으로 작성할 수 있다.
에디터에 있는 플러그인을 사용하는 것이 아니라, 프로젝트의 소스,코드 레벨에서 환경설정이 되어있끼 때문에 다른 개발툴을 사용하더라도 같은 방식으로 소스를 작성할 수 있다.
-
Prettier, ESLint 참고 블로그 글
: https://joshua1988.github.io/web-development/vuejs/boost-productivity/
- VSCode 자체의 ESLint, Prettier의 설정 또한 수정해야한다.
1) format on save : 해제
2) Prettier플러그인을 현재 작업에서 사용 안함으로 변경
3) ESLint validate 옵션에 다음과 같이 검사할 언어 설정
"eslint.validate": [
{
"language": "vue",
"autoFix": true
},
{
"language": "javascript",
"autoFix": true
}
]- ✨ 파일 절대 경로로 찾기 설정
VSCode의 jsconfig.json 파일을 수정해서 적용
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"~/*": [
"./*"
],
"@/*": [
"./src/*"
],
}
},
"exclude": [
"node_modules",
"dist"
]
}