VSC 확장프로그램

VSC가 개발도구로 특히 인기가 많은 이유는 스마트폰에 필요한 앱을 설치할 수 있듯이 VSC프로그램의 기존의 기능을 확장시킬 수 있는 확장프로그램을 추가로 설치할 수 있는 막강한 기능이 있기 때문입니다. VSC에서 유용하게 사용되는 확장프로그램을 소개합니다.

VSC 아이콘 / 폴더 색 변경
- 파일의 종류에 따라 아이콘을 해당파일의 특색에 맞추어 꾸며주는 역할을 하는 기능으로 한눈에 어떤 파일인지 알아볼 수 있어 편리합니다.

태그명 자동 변경
- 태그명을 수정할 일이 생길때 열린태그명을 수정하면 자동으로 닫힌 태그의 이름도 동시에 바꿔줍니다.

기본적으로 여는 태그와 닫는 태그를 일일이 입력해야 하던 것을 <div>만 입력을 해도 </div>가 자동으로 닫힌태그가 완성됩니다.

띠어쓰기된 부분을 색상별로 보기좋게 구분해 줍니다.

HTML CSS suport : html 에서 정의된css를 앞철자만 적으면 자동 완성시켜줍니다.

HTML 태그의 코드가 길어질 경우 닫힌 태그에 현재 태그의 클래스 이름을 알려줍니다.

파일 경로를 미리보기 할 수 있고 자동 완성할수 있도록 합니다.

ESLint
- 코드를 작성할때 명령어를 적은후에 마침표 ; 를 적어줄 때도 있고 안적어줄때도 있는데 어찌되었건 프로그램은 작동하지만 이처럼 일관성 없는 작성은 나중에 자신의 코드를 알아보는데 어려움을 주고 프로그램을 유지보수하기 힘들게 만들수 있습니다. 이러한 다양한 코드 작성 방식을 일관성 있는 방식으로 구현할 수 있도록 잡아주는 것이 eslint가 하는 역할입니다. 우선 ESLint를 쓰려면 ESLint를 설치(npm install eslint) 하고 익스텐션을 설치해 주어야 합니다. npm install eslint

- eslint 를 사용하다보면 종종 나타나는 Delete `␍` eslint (prettier/prettier) 해결방법

먼저 ESLint파일인 .esLint.js 혹은 .eslint.json을 열어줍니다.
그 후 아래와 같은 문구를 추가해 줍니다.
rules: { 'prettier/prettier': [ 'error', { endOfLine: 'auto', }, ], },

prettier
- prettier는 줄 바꿈, 공백, 들여 쓰기 등사용자 편의를 위해 코드의 줄 간격이나 행을 자동으로 깔끔하게 정리해주는 확장프로그램입니다.

- ESLint와 함께 사용시 오류가날 수있는데 이때에는 ESLint 와 충돌나는 prettier 설정을 변경해줍니다.

{
  "eslint.enable": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "prettier.trailingComma": "none",
  "workbench.iconTheme": "material-icon-theme",
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "prettier.singleQuote": true,
  "prettier.bracketSameLine": true,
  "prettier.enable": false,
  "prettier.useEditorConfig": false,
  "prettier.semi": false,
  "prettier.requirePragma": true
}

- 혹시 작동이 안될시에는 vscode 설정에서 format on save를 입력하고 나오는 설정에 체크되어 있는 지, Default Formatter 가 prettier 로 되어 있는지 확인합니다. 또는 콘솔 명령창에 npm run lint 명령을 실행시킵니다.