[VScode]작업환경

 

1. 설치 : https://code.visualstudio.com/

# 단축키 window : https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

VScode-shortcuts-windows.pdf

다운로드

 VScode-shortcuts-windows.pdf
https://demun.github.io/vscode-tutorial/shortcuts/

 

# 단축키 Mac : https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf  

VScode-shortcuts-macos.pdf

다운로드

# emmet : https://docs.emmet.io/cheat-sheet/

cheatsheet-a5.pdf

0.25MB

 

# 작업 ( shift+ctrl+p )

- 작업구성            > tasks : Configure Default Test Task 

- 테스트작업실행   > tasks : Run Test Task     

- 작업구성            > tasks : Configure Task ( alt+t , c)

- 작업실행            > tasks : Run Task         ( alt+t , r)

- 작업종료            > tasks : Terminate Task ( alt+t , t)

- 실행중인 작업 다시실행 > tasks : Run Build Task ( alt+t , b)  

 

 

# extensions 위치

   C:\Users\유저이름\.vscode\extensions   

vs code 확장프로그램

extensions.zip

14.70MB

extensions.z01

19.53MB

extensions.z02

19.53MB

extensions.z03

19.53MB

extensions.z04

19.53MB

extensions.z05

19.53MB

# 세팅 & 키맵확장 brackets

   C:\Users\유저이름\AppData\Roaming\Code\User   

User_2004.zip

다운로드

User_2211.zip

0.00MB

#설정변경 (ctrl+,) 

  - 키 바인딩을 이 파일에 넣어서 기본값을 덮어씁니다.

keybindings.json 

// 키 바인딩을 이 파일에 넣어서 기본값을 덮어씁니다.

[

    {

        "key": "ctrl+d",

        "command": "editor.action.copyLinesDownAction",

        "when": "editorTextFocus"

    },

    {

        "key": "ctrl+shift+d",

        "command": "-editor.action.copyLinesDownAction",

        "when": "editorTextFocus"

    },

    {

        "key": "ctrl+shift+d",

        "command": "editor.action.deleteLines",

        "when": "editorTextFocus"

    },

    {

        "key": "ctrl+shift+k",

        "command": "-editor.action.deleteLines",

        "when": "editorTextFocus"

    },

    {

        "key": "ctrl+shift+m",

        "command": "editor.action.joinLines"

    },

    {

        "key": "ctrl+j",

        "command": "-editor.action.joinLines"

    },

    {

        "key": "ctrl+shift+oem_2",

        "command": "editor.action.blockComment",

        "when": "editorTextFocus && !editorReadonly"

    },

    {

        "key": "shift+alt+a",

        "command": "-editor.action.blockComment",

        "when": "editorTextFocus && !editorReadonly"

    },

    {

        "key": "ctrl+q",

        "command": "workbench.action.closeFolder"

    },

    {

        "key": "ctrl+k f",

        "command": "-workbench.action.closeFolder"

    },

    {

        "key": "ctrl+alt+b",

        "command": "editor.action.formatSelection",

        "when": "editorHasSelection && editorTextFocus && !editorReadonly"

    },

    {

        "key": "ctrl+k ctrl+f",

        "command": "-editor.action.formatSelection",

        "when": "editorHasSelection && editorTextFocus && !editorReadonly"

    },

    {

        "key": "ctrl+b",

        "command": "-workbench.action.quickOpenNavigateNext",

        "when": "inQuickOpen"

    },

    {

        "key": "alt+f3",

        "command": "-editor.action.selectHighlights",

        "when": "editorFocus"

    },

    {

        "key": "ctrl+b",

        "command": "-workbench.action.toggleSidebarVisibility"

    },

    {

        "key": "ctrl+b",

        "command": "-workbench.action.showAllEditors"

    },

    {

        "key": "ctrl+shift+b",

        "command": "-workbench.action.tasks.build"

    },

    {

        "key": "ctrl+b",

        "command": "editor.action.addSelectionToNextFindMatch",

        "when": "editorFocus"

    },

    {

        "key": "ctrl+d",

        "command": "-editor.action.addSelectionToNextFindMatch",

        "when": "editorFocus"

    },

    {

        "key": "ctrl+shift+k",

        "command": "-editor.action.deleteLines",

        "when": "editorTextFocus && !editorReadonly"

    },

    {

        "key": "shift+alt+r",

        "command": "workbench.view.explorer"

    },

    {

        "key": "ctrl+shift+e",

        "command": "-workbench.view.explorer"

    },

    {

        "key": "alt+e",

        "command": "extension.translateKorean"

    },

    {

        "key": "ctrl+alt+f",

        "command": "ftp.diff"

    },

    {

        "key": "ctrl+alt+d",

        "command": "-ftp.diff"

    },

    {

        "key": "ctrl+shift+b",

        "command": "HookyQR.beautify"

    }

]

settings.json

{

   

    "htmltagwrap.tag": "div",

   

    "[html]": {

        "editor.insertSpaces": true,

        "editor.tabSize": 2,

        "editor.defaultFormatter": "vscode.html-language-features"

    },

    "[javascript]": {

        "editor.insertSpaces": true,

        "editor.tabSize": 2,

        "editor.defaultFormatter": "vscode.typescript-language-features"

    },

    "[scss]": {

        "editor.insertSpaces": true,

        "editor.tabSize": 2,

        "editor.defaultFormatter": "HookyQR.beautify"

    },

    "search.exclude": {

        "**/.git": true,

        "**/.svn": true,

        "**/bower_components": true,

        "**/html": true,

        "**/html/**": true,

        "**/node_modules": true,

        "**/tmp": true,

        "**/trlibrary": true

    },

    "emmet.syntaxProfiles": {

        "html": "html"

    },

    "ftp-simple" : {

        "remote-workspace" : "d:/_svn_ftp/ftp-simple",

        "remote-workspace-load-all" : true

    },

    "window.zoomLevel": -3,

    "files.autoSave": "off",

 

    "liveServer.settings.donotShowInfoMsg": true,

    "liveServer.settings.donotVerifyTags": true,

    "liveServer.settings.port": 7777,

    "breadcrumbs.enabled": true,

    "editor.wordWrap": "on",

    "editor.renderWhitespace": "all",

    "editor.tabSize": 2,

    "editor.detectIndentation": true,

    "editor.insertSpaces": true,

    "editor.renderControlCharacters": false,

    "workbench.activityBar.visible": true,

    "window.menuBarVisibility": "default",

    "[markdown]": {},

    "files.autoGuessEncoding": true,

    "workbench.colorTheme": "Monokai Classic",

    "git.autofetch": true,

    "editor.fontFamily": "'D2Coding',  Consolas, 'Courier New', monospace",

    "editor.columnSelection": false,

    "sync.gist": "14ce08bf574846354b6bf518ac758f55",

    "workbench.iconTheme": "Monokai Classic Icons",

    "workbench.colorCustomizations": {

       

        "editor.selectionBackground":"#ff660077",

        "editor.selectionHighlightBackground":"#ffff0055",

        "editorLineNumber.activeForeground" :"#ffff00"

    },

    "security.workspace.trust.untrustedFiles": "open",

    "[json]": {

        "editor.defaultFormatter": "vscode.json-language-features"

    },

    "[typescriptreact]": {

        "editor.defaultFormatter": "vscode.typescript-language-features"

    },

    "tabnine.experimentalAutoImports": true,

    "terminal.integrated.defaultProfile.windows": "Command Prompt",

    "git.enableSmartCommit": true,

    "npm.keybindingsChangedWarningShown": true,

    "window.commandCenter": true,

 

}

 

# 검색 대상 제외 (설정 > search.exclude) 위내용에 포함됨.

 

 "search.exclude": {

        "**/.git": true,

        "**/.svn": true,

        "**/bower_components": true,

        "**/html": true,

        "**/html/**": true,

        "**/node_modules": true,

        "**/tmp": true,

        "**/trlibrary": true

    },

Cheat Sheet

단축키 - Visual Studio Code tutorial

 

# 기본터미널 변경

- (Ctrl + Shift +P) - select default shell 검색
- Terminal:Select Default Shell 선택
- 원하는 터미널 선택

 

# 확장 마켓플레이스 [Shift+Ctrl+x]

# Settings Sync ( 설정 동기화 git )

1. Shift + Alt + U (upload your settings)

2. Shift + Alt + D (download your settings)

 

# Brackets Keymap (브라켓 에디터 단축기 적용)

 

# Node.js Extenstion Pack (nodejs 자동완성)

 

# beautify (소스정리) 

  - 파일 > 기본설정 > 바로가기키 > Beautify selection (단축키 변경)

  - 영역 선택후 (ctrl+shift+b), (ctrl+alt+b) 

# ESLint & # Prettier
- 마켓플레이스 ESLint , Prettier 설치
- 터미널 설치 : `yarn add -D eslint prettier` 
- 터미널 설치 : `yarn add eslint-config-prettier eslint-plugin-prettier`
- eslint 설정파일 생성 : `yarn eslint --init` or `npx eslint --init` or `npm init @eslint/config@latest`

- eslint.config.mjs 설정 추가 변경

import globals from 'globals';
import pluginJs from '@eslint/js';

export default [
  {
    ignores: ['node_modules/**'], // 무시할 파일 또는 폴더
    languageOptions: {
      globals: {
        ...globals.browser,
        process: 'readonly',    // process 변수를 전역 변수로 설정
      },
      ecmaVersion: 'latest',  // 최신 ECMAScript 버전 사용
      sourceType: 'module'    // 모듈 사용
    },
  },
  pluginJs.configs.recommended,
  {
    /* off, warn, error */
    rules: {
      'no-console': 'warn',         // console 사용을 경고로 표시합니다.
      'eqeqeq': 'error',            // 동등 비교시 === 또는 !==를 사용하도록 강제합니다.
      'no-unused-vars': 'warn',     // 사용되지 않는 변수에 대해 경고를 표시합니다.
      'semi': ['error', 'always'],  // 모든 문장 끝에 세미콜론을 강제합니다.
      'quotes': ['error', 'single'] // 문자열에 단일 인용부호를 사용하도록 강제합니다.
    }
  }

];​

- .prettierrc 설정 

{
  "trailingComma": "es5",    // 기본값 "es5": 객체와 배열 리터럴의 마지막 항목을 제외한 모든 항목 뒤에 쉼표를 추가
  "semi": true,              // 모든 문장 끝에 세미콜론(;)을 추가
  "tabWidth": 2,             // 탭 문자의 너비를 2칸
  "useTabs": false,          // 탭 문자 대신 공백 문자를 사용
  "arrowParens": "always",   // 화살표 함수에서 괄호를 항상 사용합니다. (파라미터가 없더라도)
  "bracketSameLine": false,  // 객체 리터럴과 배열 리터럴의 괄호를 별도 행에 위치시킵
  "bracketSpacing": true,    // 객체 리터럴과 배열 리터럴의 괄호 안쪽에 공백을 삽입
  "embeddedLanguageFormatting": "auto", // 코드 내에 포함된 다른 언어(예시: HTML 안의 JavaScript)도 자동으로 포맷팅
  "htmlWhitespaceSensitivity": "css",   // HTML 코드 내의 공백을 CSS 규칙에 따라 처리 
  "jsxSingleQuote": true,    // JSX 코드에서 싱글 따옴표(')를 사용
  "printWidth": 80,          // 코드 한 줄의 길이를 최대 80자로 제한
  "proseWrap": "always",     // 마치 산문처럼 텍스트를 줄 바꿈합니다. (길이 제한 없음)
  "quoteProps": "as-needed", // 객체 속성 키에 따옴표를 필요한 경우에만 사용합니다.
  "insertPragma": false,     // 기본값 "false": 파일 상단에 특정 주석을 삽입하지 않음
  "requirePragma": false,    // 기본값 "false": Prettier 사용을 지시하는 특정 주석을 파일 상단에 요구하지 않습니다.
  "singleAttributePerLine": false,  // HTML, Vue, JSX 태그의 속성을 한 줄에 여러개 넣는것을 허용
  "singleQuote": true,       // 따옴표(')를 기본 문자열 구분 기호로 사용
  "vueIndentScriptAndStyle": false  // Vue 파일에서 <script> 및 <style> 태그 내부 들여쓰기를 별도로 설정하지 않습니다.
}​

- ./vscode/setting.json

{
  "eslint.experimental.useFlatConfig": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "[javascriptreact]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true
}

 

# htmltagwrap (감싸는 테그 생성) 다시로드 [브라켓처럼 자식속성에따라 부모테그가 달라지지 않음]

  - 영역 선택후(alt+w) 

  - 설정 (ctrl+,)  부모테그를 div로고정

{

    "htmltagwrap.tag": "div",    

}

 

 

# Live Server (라이브뷰)

 - 하단 "Go Live" 아이콘 클릭 

 - 옵션변경 (루트변경) 재시작

 C:\Users\유저이름\.vscode\extensions\ritwickdey.liveserver-3.0.0\package.json

"liveServer.settings.root": {

    "type": [

        "string"

    ],

    "default": "/root/",

    "pattern": "/|/[^\\/]",

    "description": "Set Custom root of Live Server. \nTo change root the the server to sub folder of workspace, use '/' and relative path from workspace. \nExample: /subfolder1/subfolder2"

},

 

 

# Auto Rename Tag (닫는테그를 자동 수정)

 

 

# Path Autocompleter ( js 자동완성 )

 

# Path Intellisense ( html 소스경로 자동완성 )

 

# Korean-translator ( 한 -> 영변역기 )

 

1. 설정: 

   Ctrl + K  Ctrl + S 

   "translate" 검색

2. Alt + E 

 

# TortoiseSvn for VS Code (외부 tortoiseSvn 연결)

 

# vscode-icons (파일 확장자 아이콘으로 보기)

 

# highlight-matching-tag (여는태그 닫는 태그 하이라이트)

# Vue Snippets for Visual Studio Code (vue 문법 하이라이트)

 

# Markdown Preview Enhanced (마크다운 미리보기)

- shift +ctrl + v

# Instant Markdown (마크다운 파일을 바로 브라우저에서 확인하면서 수정 할 수 있다.)

 

 

# Log Wrapper (콘솔자동생성) 

 - 영역 선택후 (ctrl+shift+q)

 

# 옵션변경 (패턴, 단축키등)

C:\Users\유저이름\.vscode\extensions\chrisvltn.log-wrapper-for-vscode-1.0.2\package.json 

"configuration": {

    "type": "object",

    "title": "Languages' wrappers",

    "properties": {

        "debugwrapper.wrappers": {

            "type": "object",

            "default": {

                "javascript": "console.log('$eSEL', $SEL);",

                "typescript": "console.log('$eSEL', $SEL);",

                "php": "echo '<pre>$eSEL<br />'; var_dump($SEL); echo '</pre>';",

                "default": "console.log('$eSEL', $SEL);"

            },

            "description": "List of wrappers for each language"

        }

    }

},

"keybindings": [

    {

        "command": "extension.debugWrapAfter",

        "key": "ctrl+shift+q",

        "mac": "cmd+shift+q",

        "when": "editorTextFocus"

    },

    {

        "command": "extension.debugWrapBefore",

        "key": "ctrl+shift+alt+q",

        "mac": "cmd+shift+alt+q",

        "when": "editorTextFocus"

    }

]

 

 

# Path Autocomplete (소스코드 경로 자동완성) 다시로드

 

  - 루트변경 [Ctrl + ,]

"path-autocomplete.pathMappings": {

"/test": "${folder}/src/Actions/test", // alias for /test

"/": "${folder}/root", // the absolute root folder is now /src,

"$root": "${folder}/src" // the relative root folder is now /src

}

 

# 워크 스페이스 변경 

- 파일 > 작업영역을 다른이름으로 저장

{

"folders": [

{

"name": "ProjectNmae",

"path":   "root/"

}

],

"settings": {}

}

 

 

# project manager (프로젝트 관리) , [내부 워크스페이스 변경과 호환되지 않는다.]

 

1. 현프로젝트 등록 [명령어창 : F1 , Ctrl+Shift+p]

[project manager : save project]

 

2. 프로젝트 열기 

[shift + alt + p ] 

 

 

# ftp-simple 

- 설정 :  Ctrl + Shift + P > ftp-simple : Config - FTP connection setting

name : FTP 구분이름

host   : FTP 주소 (IP)

port   : 포트번호

type   : 통신 타입 (ftp, sftp)

username : 계정 이름 (id)

password  : 계정 비밀번호

path  :  FTP 접속 경로 (/)

autosave  : 저장시 원본파일 저장 여부 (true, false)

confirm :  덮어 쓰는경우 물어볼지 여부 (true, false)

 

- 실행 :  Ctrl + Shift + P > ftp-simple : Remote directory open to workspace

  원하는 디렉토리 이동후 : .Current directory : / 등록시킬 경로 

 

 

# 옵션변경 (로컬 저장소)

C:\Users\유저이름\.vscode\extensions\chrisvltn.log-wrapper-for-vscode-1.0.2\package.json 

"ftp-simple" : {

"remote-workspace" : "d:/ftp-simple",

"remote-workspace-load-all" : true

},

 

# html to javascript string (html 테그를 js 사용가능한 문자열로 변경)

 

1. 테그 영역 드래그 오른쪽 마우스 (covert to HTML to javascript srting)선텍

 

# xhml 문볍사용.
전역 : C:\Users\유저이름\AppData\Roaming\Code\User\settings.json 
프로젝트 단위 : ./vscode/ settings.json 

"emmet.syntaxProfiles": {
    "html": "xhtml"
 },

 

 

# Bracket Pair Colorizer ( 중복 괄호 컬러 구분)

 

1. 테그 영역 드래그 오른쪽 마우스 (covert to HTML to javascript srting)선텍

# snippets ( css snippets, js snippets, react snippets, vue snippets )
- 자동 완성
- Ract : Simple React Snippets

 

 

# Sass (autocomplete)

# SCSS intelliSense (Variables, Mixins and Functions) 힌트보기

# Live Sass Compiler (sass > css 자동변환), (Live Server 와 포트 퉁돌있어 Live server 포트 변경해야함)

- 하단 버튼생성 

- settings : https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md

# IntelliSense for CSS class names in HTML (클래스명 자동완성)

 

# 워크 스페이스 에서 옵션 변경

- 파일 > 작업영역을 다른이름으로 저장

{

"folders": [

{

"name": "ProjectNmae",

"path":   "root/"

}

],

  "settings": {

"liveServer.settings.multiRootWorkspaceName": "ProjectNmae",

"liveSassCompile.settings.formats":[

{

    "format": "compact",

    "extensionName": ".css",

    "savePath": null

},

{

    "format": "compressed",

    "extensionName": ".min.css",

    "savePath": null

}

]

}

}

 

# SCSS Refactoring (sass 변수 생성) [ctrl+alt+e]

# js-css-html formatter (소스힌트)

# HTML Scss Support (사용된 sass 클래스 자동완성)

 

 

# jsdoc_hint (js 힌트)

# Document This ( js 주석 자동생성) [Ctrl+Alt+D]

# ESLint (문법검사)

 

# Prettier - Javascript Formatter

# Babel ES6/ES7

 

 

# JavaScript (ES6) code snippets

# jshint

# vscode web
https://github.com/coder/code-server

- Ubuntu 설치
  Ubuntu 터미널 실행 : `curl -fsSL https://code-server.dev/install.sh | sh -s -- --dry-run` 

 

GitHub - coder/code-server: VS Code in the browser

 

 

# Vue Language Features (Volar) 

# Vetur  (Vue 관련 플러그인)

- Syntax-highlighting

- Snippet

- Emmet

- Linting / Error Checking

- Formatting

- Auto Completion

 

- Debugging

 

# Vue 2 Snippets        : vue 소스 흰트, 자동완성

# Vue Snippets(vue-ls) : (vue 문법 하이라이트)