vscode 实用配置

  • install
  • 快捷键
  • 语言配置
  • 插件
  • settings.json

install

快捷键

文件、窗口、代码跳转、终端、用户snippets设置、断点、汉化插件

功能 操作
创建文件 ctrl+n 、 ⌘N
关闭文件 ctrl+w
保存文件 ctrl+s
创建vscode窗口 ctrl+shift+n
关闭vscode窗口 ctrl+shift+w
主命令 ctrl+shift+p
直接跳转到文件 ctrl+p 后输入文件名
列出当前可执行动作 ctrl+p 后输入?
跳到指定行数 ctrl+p 后输入:
跳转到指定函数或变量 ctrl+p 后输入@
文件切换 crtl+tab 或 alt+左右箭头
跳到函数定义 F12
查看函数定义 alt+F12
windows回退一步 alt + <—
windows前进一步 alt + —>
mac回退 ctrl+-
mac前进 ctrl+shift+-
快速打开浏览器 alt+shfit+b
格式化代码 shift+alt+f
显示左侧 ctrl+B
打开终端 ctrl+`
快速生成html文档 !+回车
gitbash进入目录快速调用vscode打开目录 code .
运行代码调试 F5双击
设置断点 F9

language

golang

  • 下载:go语言中文网下载 官网下载-被墙

    • windows

      # 下载 
      # 1.14.4版本  windows操作系统 amd64架构
      https://studygolang.com/dl/golang/go1.14.4.windows-amd64.zip
      # 解压到 D:\Program Files (x86)\
      # 编辑windows环境变量
      桌面右击我的电脑 -> 属性 -> 高级系统设置 -> 环境变量 -> 用户变量 -> 新建:
        GOROOT D:\Program Files (x86)\go
        GOPATH D:\gohome
        GOPROXY https://mirrors.aliyun.com/goproxy/
      Path变量编辑 -> 新建:
      %GOROOT%\bin
      %GOPATH%\bin
      # 命令查看验证
      win+R -> cmd -> go env
      
    • linux

      wget https://studygolang.com/dl/golang/go1.14.4.linux-amd64.tar.gz
      tar xf go1.14.4.linux-amd64.tar.gz -C /usr/local
      mkdir -p /opt/go/src
      cp /etc/profile /home
      echo 'export GOROOT=/usr/local/go' >> /etc/profile
      echo 'export GOPATH=/opt/go' >> /etc/profile
      echo 'export GOPROXY=https://mirrors.aliyun.com/goproxy/' >> /etc/profile
      echo 'export PATH=$PATH:$GOROOT/bin:$GOPATH/bin' >> /etc/profile
      source /etc/profile
      go env
      
    • Mac

      wget https://studygolang.com/dl/golang/go1.14.4.darwin-amd64.tar.gz
      tar xf go1.14.4.darwin-amd64.tar.gz -C /usr/local
      mkdir -p /data/go/src
      cp /etc/profile /home
      echo 'export GOROOT=/usr/local/go' >> /etc/profile
      echo 'export GOPATH=/opt/go' >> /etc/profile
      echo 'export GOPROXY=https://mirrors.aliyun.com/goproxy/' >> /etc/profile
      echo 'export PATH=$PATH:$GOROOT/bin:$GOPATH/bin' >> /etc/profile
      source /etc/profile
      go env
      
  • 插件: F1或ctrl+shift+p , 输入命令Extensions:Install Extension —> 插件管理输入 go安装启用

  • 配置 : 菜单File — Preferences — User - Extensions - Go - Edit in settings.json

    # 用户空间 user/settings.json
    # golang部分
    {
        "go.goroot": "D:\\Program Files (x86)\\go",
        "go.gopath": "D:\\gohome",
        "go.buildOnSave": "package",
        "go.lintOnSave": "package",
        "go.formatTool": "goimports",      // 保存时格式化且自动导入import
        "go.gocodeAutoBuild": false,
        "go.useGoProxyToCheckForToolUpdates": true  // go工具更新使用GOPROXY代理
    }
    
    # 工作空间
    # 设置调试配置 .vscode/launch.json
    {
        "version": "0.2.0",
        "configurations": [
            {
                "name": "Launch",
                "type": "go",
                "request": "launch",
                "mode": "auto",
                "stopOnEntry": false,
                "program": "${fileDirname}",
                "env": {},
                "args": []
            }
        ]
    }
    
  • 安装go工具 golang-package-git

    # vscode点击安装会出现报错。。感觉有代理翻墙就好了
    
    # 打开vscode的终端 crtl+`
    # 直接可以下载安装 (go get -u强制更新 -v显示进度 -x显示过程 -d只下载不安装)
    go get -u -v  github.com/mdempsky/gocode 
    go get -u -v  github.com/uudashr/gopkgs/cmd/gopkgs 
    go get -u -v  github.com/ramya-rao-a/go-outline  
    go get -u -v  github.com/acroca/go-symbols  
    go get -u -v  github.com/go-delve/delve/cmd/dlv  
    go get -u -v  github.com/rogpeppe/godef
    go get -u -v  github.com/sqs/goreturns  
    go get -u -v  github.com/cweill/gotests
    go get -u -v  github.com/godoctor/godoctor
    
    # 被墙的,先在git下载再安装。 有代理可以解决部分
    mkdir -p $GOPATH/src/golang.org/x
    cd $GOPATH/src/golang.org/x
    git clone https://github.com/golang/tools.git tools
    git clone https://github.com/golang/lint.git lint
    git clone https://github.com/golang/net.git net
    
    go install golang.org/x/tools/cmd/guru
    go install golang.org/x/tools/cmd/gorename
    go install golang.org/x/lint/golint
    go install golang.org/x/net/gonet
    

python

  • 下载: python.org

    • windows

      # 安装时确认勾选添加到环境变量,安装到D:\Program Files (x86)\python
      https://www.python.org/ftp/python/3.8.3/python-3.8.3.exe
      # 手动添加环境变量
      桌面右击我的电脑 -> 属性 -> 高级系统设置 -> 环境变量 -> 用户变量 -> Path变量编辑 -> 新建:
      D:\Program Files (x86)\python\Scripts\
      D:\Program Files (x86)\python\
      
      # cmd 验证
      # python 
      >>> import this
      # pip list            # 检查第三方包
      # pip install flake8  # flake8检查编写代码不规范和语法错误
      # pip install yapf    # 格式化工具
      
  • 插件: F1或ctrl+shift+p , 输入命令Extensions:Install Extension —> 插件管理输入 python安装启用

  • 配置 : 菜单`File — Preferences — User – Extensions – Python – Edit in settings.json

    # 用户空间 user/settings.json
    # python部分 
    {
        "python.pythonPath": "D:\\Program Files (x86)\\python",
        "python.pipenvPath": "D:\\Program Files (x86)\\python\\Scripts",
        "python.linting.flake8Enabled": true,
        "python.formatting.provider": "yapf",
        "python.linting.flake8Args": ["--max-line-length=248"],
        "python.linting.pylintEnabled": false,
        "python.linting.enabled": true
    }
    
    # 工作空间: 当前目录下.vscode中设置
    # 一般设置 .vscode/settings.json
    # 设置调试配置 .vscode/launch.json
    {
      "version": "0.2.0",
        "configurations": [
            {
                "name": "Python: 当前文件",
                "type": "python",
                "request": "launch",
                "stopOnEntry": true,       // 断点调试
                "program": "${file}",
                "console": "integratedTerminal"
            }
        ]
    }
    

vue

  • 下载: nodejs.org

    • windows

      # 下载
      https://nodejs.org/dist/v10.15.3/node-v10.15.3-win-x64.zip
      # 解压 D:\Program Files (x86)\node-v10.15.3-win-x64
      # 设置环境变量
      桌面右击我的电脑 -> 属性 -> 高级系统设置 -> 环境变量 -> 用户变量 -> Path变量编辑 -> 新建:
      D:\Program Files (x86)\node-v10.15.3-win-x64\
      
      # cmd查看
      npm -v
      6.4.1
      
      # 全局安装vue
      npm install vue -g
      
  • 插件: F1或ctrl+shift+p , 输入命令Extensions:Install Extension —> 插件管理输入 vue安装启用

    # 其他插件
    vetur  语法高亮,格式化等
    ESLint 检测语法错误
    open-in-brower 快捷调用浏览器查看html文件
    
  • 配置

    # 用户空间: user/settings.json
    {
      "editor.formatOnSave": true,    // 代码保存时自动格式化,其他一样生效
      "editor.codeActionsOnSave": {   // 每次保存的时候将代码按eslint格式进行修复
        "source.fixAll": true
      },
      "eslint.validate": [           // 配置下支持vue语言
            "javascript",
            "javascriptreact",
            "vue-html",
            {
              "language": "vue",
              "autoFix": true
            }
       ]
    }
    

plugin

markdown

  • 生成目录

    # 安装插件 Markdown Toc
    ext install markdown-toc
    # 插入目录
    markdown文件中右击 —> “Markdown TOC: Insert/Updata” 
    # 乱码配置 settings.json
    {  "files.eol": "\n" }
    

sftp

  • 代码同步到远程机器

    # 安装插件 sftp 后左侧扩展图标下新增一个远程目录图标
    # 工作空间 .vscode/sftp.json
    {   
        # 远程目录的别名
        "name": "vue",
        "host": "192.168.56.101",
        "protocol": "sftp",
        "port": 22,
        "username": "root",
        "password": "root123456",
        # 默认vscode的工作区目录,设置要同步的目录
        "context": "D:\\gohome\\src\\github.com\\didi\\nightingale",
        # 同步到远程机器的目录
        "remotePath": "/data/vue",
        # 保存上传
        "uploadOnSave": true,
        # 忽略的文件不上传
        "ignore": [
            ".vscode",
            ".git",
            ".DS_Store"
        ],
        # 监听,重命名文件或删除同步更新
        "watcher": {
            "files": "**/*",
            "autoUpload": true,
            "autoDelete": true
        },
        # 支持不同git分支同步到不同主机
        "profiles": {
            "dev": {
                "host": "192.168.56.101",
                "remotePath": "/data/vue",
                "uploadOnSave": true
            },
            "master": {
                "host": "192.168.56.101",
                "remotePath": "/data/vue2"
            }
        },
        "defaultProfile": "master"
    }
    

git

# 下载安装
https://github.com/git-for-windows/git/releases/download/v2.27.0.windows.1/Git-2.27.0-64-bit.exe
# 安装设置
D:\Program Files (x86)\Git
# vscode的git图形管理很方便

settings.json

{
  "window.zoomLevel": 0,
  "files.autoSave": "off",
  "files.eol": "\n",
  "editor.columnSelection": false,
  "editor.fontSize": 20,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "editor.renderWhitespace": "all",
  "editor.minimap.enabled": true,
  "breadcrumbs.enabled": true,
  "debug.allowBreakpointsEverywhere": true,
  "git.path": "D:\\Program Files (x86)\\Git\\cmd\\git.exe",
  "go.gopath": "D:\\gohome",
  "go.goroot": "D:\\Program Files (x86)\\go",
  "go.buildOnSave": "package",
  "go.lintOnSave": "package",
  "go.formatTool": "goimports",
  "go.useCodeSnippetsOnFunctionSuggest": true,
  "go.useLanguageServer": false,
  "go.useGoProxyToCheckForToolUpdates": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
  ],
  "python.linting.flake8Enabled": true,
  "python.formatting.provider": "yapf",
  "python.linting.flake8Args": [
    "--max-line-length=248"
  ],
  "python.linting.pylintEnabled": false,
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注