vscode bracket pair colorizer

  • 익스텐션으로 사용하던 Bracket Pair Colorizer가 vscode 기본 기능이 되었다
  • 기존에 사용하던 익스텐션을 제거하고, 세팅에서 활성화해주었다
settings.json
1
2
3
4
{
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": "active"
}

참고

로컬에서 vscode live server로 spa 실행하기

상황

  • live server로 리액트 빌드 결과를 실행해보고 싶었다
  • github pages로 호스팅하기 때문에 basePath?가 있었다
  • live server에서 일단 로컬로 실행해보고 싶었는데,
  • basePath와 spa를 어떻게 실행해 볼 수 있을까?

해결

.vscode\settings.json
1
2
3
4
5
// .vscode\settings.json
{
"liveServer.settings.mount": [["/go-home-time", "./"]], // package.json에 homepage필드가 있는 경우
"liveServer.settings.file": "index.html"
}

참고

eslint 빨간줄, 재시작

  • nodejs, javascript, typescript 등 어떤 카테고리에 넣어야할지 고민하다가 그냥 vscode에 넣었다

  • 왜냐하면 vscode를 재시작하는 게 중요 포인트이기 때문이다

  • ESLint: Restart ESLint Server 또는

  • developer: reload window 을 꼭 해주자

  • eslint config를 수정했으면 vscode창을 다시 실행한다
  • eslint config를 수정했는데, 린트가 동작하지 않는데, 뭐 때문에 동작하지 않는지 모른다면
  • yarn eslint tmp.ts 같은 명령을 사용해서 아웃풋을 확인한다
  • 그러면 어떤 패키지가 없어서, 어떤 유효하지 않은 설정을 사용해서 동작하지 않는다는 정보를 얻을 수 있다
  • 그리고 eslintrc에 들어가는 내용을 너무 다 세세히 알려고 하지 말자
  • 일단 동작하면 그러려니 하면 된다
  • 나중에 관련해서 더 세세하게 커스텀 하고 싶을 때만 알아보자

eslint 장점

  • 코딩 실력이 크게 늘었다?
  • eslint가 잡아주는 오류들을 수정하면서
  • js의 유용한 문법이나,
  • 불필요한 코드들을 많이 지울 수 있었다
  • 예를 들면, prefer-destructuring룰로 구조 분해 할당 같은 문법들을 알게 된다라던가
  • 반복문 안에서 비동기 함수를 await을 붙여 실행하는데,
  • 당시에는 비동기가 익숙하지 않아서 무조건 await을 붙여서 값을 바로 꺼내서 핸들 하기 급급했는데,
  • 린트가 Unexpected 'await' inside a loop. 에러를 뱉어줬다
  • 관련해서 검색하고 공부하고, Promise에 대해 자세히 공부해보고,
  • 결국 이전의 결과가 다음에 필요하지 않다면
  • Promise.all로 실행해서 병렬로 처리 후에 한 번에 결과를 받아서 핸들 한다던가
  • 선생님 같은 느낌으로 정말 도움이 많이 되었다

eslint rule 설정할 때

“off” or 0 - turn the rule off
“warn” or 1 - turn the rule on as a warning (doesn’t affect exit code)
“error” or 2 - turn the rule on as an error (exit code is 1 when triggered)

prettier와 함께쓰기

terminal
1
yarn add -D prettier eslint-config-prettier
  • eslint-config-prettier를 설치한다
  • eslint와 prettier같 충돌나는 룰을 disable해준다
eslintrc.json
1
2
3
4
5
6
7
8
9
10
11
12
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"react-app",
"react-app/jest",
"plugin:react/recommended",
"airbnb",
"prettier" // 여기 추가
],

참고

vscode git undo last commit

  • 오…
  • alias.r1=! r1() { git reset --soft HEAD~1 ; } ; r1
  • 나는 평소 이런 식으로 이전 커밋을 되돌렸다
  • 직접 치려면 많이 긴 명령어라 줄여서 사용했는데,
  • 이제는 undo last commit명령을 알아서 애용할 것 같다

참고

vscode devcontainers

  • 로컬에 있는 프로젝트를 고대로 도커 컨테이너로 가져와 작업 가능..!

쉽게

  • Remote-Containers: Add Development Container Configuration Files...
  • 원하는 환경 선택!
  • 그러면 .devcontainer 폴더와 그아래 Dockerfile 과 컨테이너 devcontainer.json 이 자동 생성된다
  • Remote-Containers: Reopen in Container로 컨테이너에서 개발을 해볼 수 있겠다

참고

github dot key

  • 레포를 로컬에 클론하지 않고도 코드를 탐색해 볼 수 있다
  • 아무 저장소에서 . (dot) key 를 눌러서 열어볼 수 있다
  • 처음 켜지는데 시간이 조금 걸린다

참고

vscode extension rest client

  • Rest Client라는 도구가 있다
  • text 기반으로 간편하게 리퀘스트를 작성할 수 있다
example.http
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
###
GET http://localhost:3000/movies/ HTTP/1.1

###
GET http://localhost:3000/movies/1 HTTP/1.1

###
POST http://localhost:3000/movies/ HTTP/1.1
Content-Type: application/json

{
"title": "sung",
"year": 2020,
"genres": ["mind blown"]
}
  • 확장자는 http로 한다
  • 한 파일에서 여러 개의 리퀘스트를 작성할 때는 ###으로 구분하여 작성한다
  • 리퀘스트 작성할 때 메서드(get, post, put, delete,…)를 입력하면 자동완성 스니펫을 제공한다
  • 단축키로는 ctrl alt R로 리퀘스트를 보낼 수 있다

Variables

envExample.http
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@endpoint = http://localhost:3000

###

POST {{endpoint}}/login HTTP/1.1
Content-Type: application/json

{
"username": "sung",
"password": "1234"
}

###

GET {{endpoint}}/profile HTTP/1.1
  • 변수를 사용할 수 있다
  • 계속 중복해서 사용하는 문자열이나, 나중에 변경될 여지가 있는 것들을 변수로 만들 수 있다

Environments

  • ctrl alt e 로 환경을 설정해 줄 수 있는데, 먼저 환경을 만들어야 한다
.vscode/settings.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
// ...
"rest-client.environmentVariables": {
"$shared": {
"version": "v1",
"prodToken": "foo",
"nonProdToken": "bar"
},
"local": {
"version": "v2",
"host": "localhost",
"token": "{{$shared nonProdToken}}",
"secretKey": "devSecret"
},
"production": {
"host": "example.com",
"token": "{{$shared prodToken}}",
"secretKey": "prodSecret"
}
}
}
  • .vscode/settings.json 에 json으로 정의해줄 수 있다
  • 이제 ctrl alt e 명령으로 원하는 환경을 선택해 사용한다

활용

2개의 유저로 번갈아 가면서 테스트할 때 활용했다

  • .vscode/settings.json 에 user1, user2의 토큰을 적는다

  • 스위치 해가면서 같은 api를 실행한다

쿠키 지우기

참고