vscode 환경설정

동기화 기능이 있지만 가끔 그냥 셋팅했던 설정값 자체가 필요할 때가 있다.(머가 어떻게 셋팅되었는지 걍 빨리 직관적으로 보고 싶은 경우) 그래서 confluence에 정리한 부분의 일부를 작성한다.
그리고 익스텐션의 경우 동기화 기능 켜면 한오백년 걸린다 걍 아래 절차대로 치는게 빠르다

vscode 에 필요한 extension
vscode에서 ctrl + shift + p 누르고 shell 에서 code 명령어 사용 클릭 이후 터미널에서 아래 입력
*기존 extionsion 추출 명령어: code --list-extensions | xargs -L 1 echo code --install-extension > list.txt

code --install-extension aaron-bond.better-comments
code --install-extension alefragnani.Bookmarks
code --install-extension anseki.vscode-color
code --install-extension BriteSnow.vscode-toggle-quotes
code --install-extension dbaeumer.vscode-eslint
code --install-extension developersoapbox.vscode-springboot-developer-pack
code --install-extension developersoapbox.vscode-springboot-snippets
code --install-extension eamodio.gitlens
code --install-extension ecmel.vscode-html-css
code --install-extension Equinusocio.vsc-community-material-theme
code --install-extension Equinusocio.vsc-material-theme
code --install-extension equinusocio.vsc-material-theme-icons
code --install-extension esbenp.prettier-vscode
code --install-extension formulahendry.auto-close-tag
code --install-extension formulahendry.auto-rename-tag
code --install-extension formulahendry.code-runner
code --install-extension glenn2223.live-sass
code --install-extension helixquar.randomeverything
code --install-extension hwencc.html-tag-wrapper
code --install-extension juhahinkula.thymeleaf
code --install-extension kisstkondoros.vscode-gutter-preview
code --install-extension lostfields.nodejs-repl
code --install-extension mhutchie.git-graph
code --install-extension mohsen1.prettify-json
code --install-extension MS-CEINTL.vscode-language-pack-ko
code --install-extension ms-vscode.cmake-tools
code --install-extension ms-vscode.cpptools
code --install-extension ms-vscode.cpptools-extension-pack
code --install-extension ms-vscode.cpptools-themes
code --install-extension naumovs.color-highlight
code --install-extension PKief.material-icon-theme
code --install-extension pranaygp.vscode-css-peek
code --install-extension PulkitGangwar.nextjs-snippets
code --install-extension ramyaraoa.sass-helper
code --install-extension redhat.java
code --install-extension ritwickdey.LiveServer
code --install-extension sasa.vscode-sass-format
code --install-extension sohibe.java-generate-setters-getters
code --install-extension solnurkarim.html-to-css-autocompletion
code --install-extension styled-components.vscode-styled-components
code --install-extension svipas.prettier-plus
code --install-extension syler.sass-indented
code --install-extension TabNine.tabnine-vscode
code --install-extension twxs.cmake
code --install-extension VisualStudioExptTeam.intellicode-api-usage-examples
code --install-extension VisualStudioExptTeam.vscodeintellicode
code --install-extension vscjava.vscode-java-debug
code --install-extension vscjava.vscode-java-dependency
code --install-extension vscjava.vscode-java-pack
code --install-extension vscjava.vscode-java-test
code --install-extension vscjava.vscode-maven
code --install-extension WallabyJs.console-ninja
code --install-extension wayou.vscode-todo-highlight
code --install-extension wix.vscode-import-cost
code --install-extension xabikos.JavaScriptSnippets
code --install-extension xaver.clang-format

*설치된 extionsion 목록을 출력하는 법 (cli 에서 파일 저장할 위치로 이동 후)

code --list-extensions | xargs -L 1 echo code --install-extension > list.txt

커맨드 + shift + p → 사용자 설정 json → 아래 내용 복붙
*sass 컴파일 설정도 포함됨

{
    "tabnine.experimentalAutoImports": true,
    "workbench.startupEditor": "none",
    "editor.fontSize": 18,
    "liveSassCompile.settings.formats": [
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "~/../css"
        }
    ],
    "workbench.iconTheme": "material-icon-theme",
    "liveServer.settings.donotShowInfoMsg": true,
    "diffEditor.ignoreTrimWhitespace": false,
    "editor.wordWrap": "on",
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "files.trimFinalNewlines": true,
    "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": true,
    "javascript.format.insertSpaceAfterKeywordsInControlFlowStatements": false,
    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": true,
    "javascript.format.insertSpaceAfterCommaDelimiter": false,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "prettier.javascriptEnable": ["javascript", "javascriptreact"],
    "prettier.bracketSpacing": false,
    "prettier.documentSelectors": [],
    "prettier.semi": true,
    "prettier.printWidth": 150,
    "prettier.singleQuote": true,
    "prettier.useTabs": false,
    "prettier.tabWidth": 4,
    "prettier.trailingComma": "all",
    "prettier.arrowParens": "avoid",
    "prettier.endOfLine": "auto",
    "kite.showWelcomeNotificationOnStartup": false,
    "explorer.confirmDragAndDrop": false,
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "javascript.updateImportsOnFileMove.enabled": "always",
    "git.autofetch": true,
    "editor.formatOnPaste": true,
    "javascript.format.enable": false,
    "editor.formatOnSave": true,
    "autoprefixer.formatOnSave": true,
    "editor.linkedEditing": true,
    "typescript.updateImportsOnFileMove.enabled": "always",
    "wallaby.codeLensFeature.runTest": true,
    "git.suggestSmartCommit": false,
    "yaml.schemas": {
        "file:///Users/newploy/.vscode/extensions/atlassian.atlascode-2.10.12/resources/schemas/pipelines-schema.json": "bitbucket-pipelines.yml"
    },
    "redhat.telemetry.enabled": true,
    "settingsSync.ignoredSettings": ["-java.import.gradle.java.home"],
    "debug.javascript.autoAttachFilter": "disabled",
    "lldb.suppressUpdateNotifications": true,
    "editor.largeFileOptimizations": false,
    "terminal.external.osxExec": "iTerm.app",
    "terminal.integrated.defaultProfile.osx": "zsh",
    "terminal.integrated.fontFamily": "D2Coding",
    "terminal.integrated.fontSize": 17,
    "workbench.colorTheme": "Material Theme Darker High Contrast",
    "java.jdt.ls.java.home": "/Library/Java/JavaVirtualMachines/temurin-11.jdk/Contents/Home"
}

code snippet

{
    "sw": {
        "prefix": "sw",
        "body": ["const swap = function (idx1, idx2, arr) {[arr[idx1], arr[idx2]] = [arr[idx2], arr[idx1]];}"],
        "description": "swap"
    },

    "for loop": {
        "prefix": "fl",
        "body": ["for(let i=0; i<arr.length; ++i){", " ", "}"],
        "description": "create for loop"
    },
    "react default": {
        "prefix": "re",
        "body": [
            "import React from 'react';",
            "import styled from 'styled-components';",
            "\n const Layout = styled.div``\n",
            "const temp = () => {return ( <Layout><div></div></Layout>);};export default temp;"
        ],
        "description": "react default setting"
    },
    "for loop j version": {
        "prefix": "flj",
        "body": ["for(let i=0; i<arr.length; ++i){", "  for(let j=0; j<arr.length; ++j){", " ", "  }", "}"],
        "description": "create for loop"
    },
    "let n": {
        "prefix": "ln",
        "body": ["let n = arr.length"],
        "description": "create let n"
    },
    "console.log": {
        "prefix": "cl",
        "body": ["console.log()"],
        "description": "create console log"
    },
    "console.log-basic": {
        "prefix": "clb",
        "body": ["console.log('i',i,'j',j,'arr',arr)"],
        "description": "create console basic log"
    },
    "console.log-solution": {
        "prefix": "cls",
        "body": ["console.log(solution())"],
        "description": "create console log(solution)"
    },
    "console.log-json-parse-arr": {
        "prefix": "clj",
        "body": ["console.log('arr_in',JSON.parse(JSON.stringify(arr)))"],
        "description": "create console log(solution)"
    },
    "isValid": {
        "prefix": "clj",
        "body": ["const isValid = (x,y) => x>=0 && x<n && y>=0 && y<m"],
        "description": "isValid"
    },
    "arr-sort": {
        "prefix": "aso",
        "body": ["arr.sort((a,b)=>a-b)"],
        "description": "arr-sort"
    },
    "Number.MAX": {
        "prefix": "max",
        "body": ["let answer=Number.MAX_SAFE_INTEGER;"],
        "description": "create MAX"
    },
    "Number.MIN": {
        "prefix": "min",
        "body": ["let answer=Number.MIN_SAFE_INTEGER;"],
        "description": "create MIN"
    },
    "check array": {
        "prefix": "ca",
        "body": ["let ch = Array.from({length:n+1}, ()=>0)"],
        "description": "create checkbox array"
    },
    "graph array": {
        "prefix": "ga",
        "body": ["let graph = Array.from(Array(n+1), ()=>Array(n+1).fill(0))"],
        "description": "create graph array"
    },
    "graph array example": {
        "prefix": "gae",
        "body": ["let exArr = [", "  [(0, 0), (0, 1), (0, 2)],", "  [(1, 0), (1, 1), (1, 2)],", "  [(2, 0), (2, 1), (2, 2)]", "];"],
        "description": "create graph array example"
    },

    "direction x,y-4": {
        "prefix": "dxy",
        "body": ["let dx = [0,0,1,-1]", "let dy = [-1,1,0,0]"],
        "description": "create dxy-4"
    },
    "direction x,y-8": {
        "prefix": "dxy8",
        "body": ["let dx=[-1, -1, 0, 1, 1, 1, 0, -1]", "let dy=[0, 1, 1, 1, 0, -1, -1, -1]"],
        "description": "create dxy-8"
    },
    "function solution": {
        "prefix": "fs",
        "body": ["function solution(){", "  let answer", "  return answer", "}"],
        "description": "create function"
    },
    "arrow function solution": {
        "prefix": "afs",
        "body": ["let solution = () => {", " ", "}"],
        "description": "create function"
    },
    "DFS": {
        "prefix": "dfs",
        "body": ["function solution(arr) {", " ", "function DFS(){", "  if(){", "  ", "  }else{", "  ", "  }", " }", " DFS()", " ", "}"],
        "description": "create DFS"
    },
    "isPrime": {
        "prefix": "ip",
        "body": [
            "function isPrime(num) {",
            "  if (num < 2) return false",
            "  if (num === 2) return true",
            "  for (let i = 2; i <= Math.sqrt(num); i++) {",
            "    if (num % i === 0) return false",
            "  }",
            " return true",
            "}"
        ],
        "description": "create isPrime"
    }
}

short cut

// 키 바인딩을 이 파일에 넣어서 기본값 재정의auto[]
[
    {
        "key": "ctrl+[Backquote]",
        "command": "workbench.action.terminal.toggleTerminal"
    },
    {
        "key": "ctrl+cmd",
        "command": "editor.action.triggerSuggest",
        "when": "editorHasCompletionItemProvider && textInputFocus && !editorReadonly"
    },
    {
        "key": "cmd+i",
        "command": "-editor.action.triggerSuggest",
        "when": "editorHasCompletionItemProvider && textInputFocus && !editorReadonly"
    },
    {
        "key": "alt+escape",
        "command": "-editor.action.triggerSuggest",
        "when": "editorHasCompletionItemProvider && textInputFocus && !editorReadonly"
    },
    {
        "key": "ctrl+space",
        "command": "-editor.action.triggerSuggest",
        "when": "editorHasCompletionItemProvider && textInputFocus && !editorReadonly"
    },
    {
        "key": "cmd+i",
        "command": "editor.action.triggerSuggest"
    },
    {
        "key": "alt+q",
        "command": "workbench.action.navigatePreviousInNavigationLocations"
    },
    {
        "key": "ctrl+a",
        "command": "revealFileInOS",
        "when": "!editorFocus"
    },
    {
        "key": "alt+cmd+r",
        "command": "-revealFileInOS",
        "when": "!editorFocus"
    },
    {
        "key": "alt+w",
        "command": "workbench.action.navigateForwardInNavigationLocations"
    },
    {
        "key": "alt+e",
        "command": "workbench.action.navigateToLastNavigationLocation"
    },
    {
        "key": "alt+r",
        "command": "workbench.action.navigateBackInNavigationLocations"
    },
    {
        "key": "ctrl+alt+f11",
        "command": "extension.node-debug.toggleAutoAttach"
    },
    {
        "key": "ctrl+shift+right",
        "command": "-editor.action.smartSelect.expand",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+shift+right",
        "command": "bookmarks.jumpToNext",
        "when": "editorTextFocus"
    },
    {
        "key": "alt+cmd+l",
        "command": "-bookmarks.jumpToNext",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+shift+left",
        "command": "-editor.action.smartSelect.shrink",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+shift+left",
        "command": "bookmarks.jumpToPrevious",
        "when": "editorTextFocus"
    },
    {
        "key": "alt+cmd+j",
        "command": "-bookmarks.jumpToPrevious",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+shift+up",
        "command": "bookmarks.clear"
    },
    {
        "key": "ctrl+shift+down",
        "command": "bookmarks.toggle",
        "when": "editorTextFocus"
    },
    {
        "key": "alt+cmd+k",
        "command": "-bookmarks.toggle",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+cmd+b",
        "command": "workbench.action.tasks.build",
        "when": "taskCommandsRegistered"
    },
    {
        "key": "shift+cmd+b",
        "command": "-workbench.action.tasks.build",
        "when": "taskCommandsRegistered"
    },
    {
        "key": "ctrl+cmd+r",
        "command": "workbench.action.tasks.test"
    },
    {
        "key": "ctrl+f9",
        "command": "workbench.debug.viewlet.action.removeAllBreakpoints"
    },
    {
        "key": "f5",
        "command": "cmake.debugTarget",
        "when": "cmake:enableFullFeatureSet && inCMakeProject && !cmake:hideDebugCommand && !inDebugMode"
    },
    {
        "key": "ctrl+f5",
        "command": "-cmake.debugTarget",
        "when": "cmake:enableFullFeatureSet && inCMakeProject && !cmake:hideDebugCommand && !inDebugMode"
    }
]

ts/react
{
    "react func component": {
        "prefix": "rfc",
        "body": ["export default function ${TM_FILENAME_BASE}($2) {", "    $3", "    return (<>$4</>)", "}", ""],
        "description": "react func component"
    },
    "next.js TypeScript issue": {
        "prefix": "nerr",
        "body": ["{/* @ts-expect-error Async Server Component */}"],
        "description": "nerr"
    }
}

ts
{
    "sw": {
        "prefix": "sw",
        "body": ["const swap = function (idx1, idx2, arr) {[arr[idx1], arr[idx2]] = [arr[idx2], arr[idx1]];}"],
        "description": "swap"
    },

    "for loop": {
        "prefix": "fl",
        "body": ["for(let i=0; i<arr.length; i++){", " ", "}"],
        "description": "create for loop"
    },
    "react default": {
        "prefix": "re",
        "body": [
            "import React from 'react';",
            "import styled from 'styled-components';",
            "\n const Layout = styled.div``\n",
            "const temp = () => {return ( <Layout><div></div></Layout>);};export default temp;"
        ],
        "description": "react default setting"
    },
    "for loop j version": {
        "prefix": "flj",
        "body": ["for(let i=0; i<arr.length; i++){", "  for(let j=0; j<arr.length; j++){", " ", "  }", "}"],
        "description": "create for loop"
    },
    "let n": {
        "prefix": "ln",
        "body": ["let n = arr.length"],
        "description": "create let n"
    },
    "console.log": {
        "prefix": "cl",
        "body": ["console.log()"],
        "description": "create console log"
    },
    "console.log-basic": {
        "prefix": "clb",
        "body": ["console.log('i',i,'j',j,'arr',arr)"],
        "description": "create console basic log"
    },
    "console.log-solution": {
        "prefix": "cls",
        "body": ["console.log(solution())"],
        "description": "create console log(solution)"
    },
    "console.log-json-parse-arr": {
        "prefix": "clj",
        "body": ["console.log('arr_in',JSON.parse(JSON.stringify(arr)))"],
        "description": "create console log(solution)"
    },
    "isValid": {
        "prefix": "clj",
        "body": ["const isValid = (x,y) => x>=0 && x<n && y>=0 && y<m"],
        "description": "isValid"
    },
    "arr-sort": {
        "prefix": "aso",
        "body": ["arr.sort((a,b)=>a-b)"],
        "description": "arr-sort"
    },
    "Number.MAX": {
        "prefix": "max",
        "body": ["let answer=Number.MAX_SAFE_INTEGER;"],
        "description": "create MAX"
    },
    "Number.MIN": {
        "prefix": "min",
        "body": ["let answer=Number.MIN_SAFE_INTEGER;"],
        "description": "create MIN"
    },
    "check array": {
        "prefix": "ca",
        "body": ["let ch = Array.from({length:n+1}, ()=>0)"],
        "description": "create checkbox array"
    },
    "graph array": {
        "prefix": "ga",
        "body": ["let graph = Array.from(Array(n+1), ()=>Array(n+1).fill(0))"],
        "description": "create graph array"
    },
    "graph array example": {
        "prefix": "gae",
        "body": ["let exArr = [", "  [(0, 0), (0, 1), (0, 2)],", "  [(1, 0), (1, 1), (1, 2)],", "  [(2, 0), (2, 1), (2, 2)]", "];"],
        "description": "create graph array example"
    },

    "direction x,y-4": {
        "prefix": "dxy",
        "body": ["let dx = [0,0,1,-1]", "let dy = [-1,1,0,0]"],
        "description": "create dxy-4"
    },
    "direction x,y-8": {
        "prefix": "dxy8",
        "body": ["let dx=[-1, -1, 0, 1, 1, 1, 0, -1]", "let dy=[0, 1, 1, 1, 0, -1, -1, -1]"],
        "description": "create dxy-8"
    },
    "function solution": {
        "prefix": "fs",
        "body": ["function solution(){", "  let answer", "  return answer", "}"],
        "description": "create function"
    },
    "arrow function solution": {
        "prefix": "afs",
        "body": ["let solution = () => {", " ", "}"],
        "description": "create function"
    },
    "DFS": {
        "prefix": "dfs",
        "body": ["function solution(arr) {", " ", "function DFS(){", "  if(){", "  ", "  }else{", "  ", "  }", " }", " DFS()", " ", "}"],
        "description": "create DFS"
    },
    "isPrime": {
        "prefix": "ip",
        "body": [
            "function isPrime(num) {",
            "  if (num < 2) return false",
            "  if (num === 2) return true",
            "  for (let i = 2; i <= Math.sqrt(num); i++) {",
            "    if (num % i === 0) return false",
            "  }",
            " return true",
            "}"
        ],
        "description": "create isPrime"
    }
}