Vscode安装与设置

Silence-Lee

已于 2024-08-08 11:28:56 修改

阅读量321

点赞数

分类专栏：安装记录文章标签： vscode ide 编辑器

于 2020-06-03 18:06:19 首次发布

本文链接：https://blog.csdn.net/chenxi_li/article/details/100513482

版权

安装记录专栏收录该内容

12 篇文章 3 订阅

订阅专栏

文章目录

毕业了，工作的第二天，师傅看到我用的webstrom，让我赶紧换成VSCode，虽然我觉得webstrom其实也挺好用的，但为了和师父他们一致，就装一下VSCode吧，记录一下配置过程！
（师傅推荐）：
史上最全vscode配置使用教程
VSCode新手入门教程

1 软件下载

官网地址
过程中全选了，避免后期缺少东西，然后直接安装即可。
在这里插入图片描述

2 英文汉化

安装完成是英文的，汉化后方便我们使用。
方法：直接在扩展程序中搜索 chinese ，会出现对应插件，装该插件，然后重启即可
在这里插入图片描述

3 Vscode安装插件

参考：VSCode新手入门教程
常用插件安装：
在这里插入图片描述
提示自己：注意上面的prettier-code formatter不用安装，因为我们项目中用到的是ESLint校验方式
下面是vue的插件安装：

文件夹图标如下：

ctrl+~打开终端
ctrl+滚轮放大缩小设置（文件->首选项->设置->用户->拓展下的JSON）：
在这里插入图片描述
然后在settings.json中添加 "editor.mouseWheelZoom": true,，然后保存即可。注意有逗号。

4 VSCode中的git可视化管理工具

在这里插入图片描述
输入框是像git commit -m ‘提示信息’那样的东西
上面会有提交进度
3中 a表示add m：修改删除 d u应该是更新？
点击上面三个点有push，可以将代码push到云端

5 VsCode快捷键

非常全的VsCode快捷键

6 Vscode代码无法折叠问题

打开Vscode中的设置
在搜索框中搜索folding
将折叠策略由auto改为indentation

在这里插入图片描述

7 vscode终端设置为bash形式，并设置eslint

文件——>首选项——>设置，在设置的搜索框中输入“terminal.integrated.shell.windows”，打开settings.json文件，设置文件中的terminal.integrated.shell.windows为自己电脑中git bash.exe的位置
在这里插入图片描述

VScode配置git bash为终端新方式
下面是设置eslint
先在应用商店中安装ESLint，然后设置settings.json文件如下：

{
    "editor.formatOnSave": true,
    "javascript.format.enable": true,
    "html.format.enable": false,
    "files.eol": "\n",
    "terminal.integrated.shell.windows": "D:\\Worktools\\Git\\Git\\bin\\bash.exe",
    "files.autoSave": "onFocusChange",
    "vetur.format.enable": false,
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    "eslint.options": {
        "configFile": "./.eslintrc.js"
    },
    "eslint.alwaysShowStatus": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        },
        "vue"
    ],
    "eslint.autoFixOnSave": true,
    "eslint.format.enable": true,
    "eslint.lintTask.enable": true,
    "eslint.onIgnoredFiles": "warn",
    "eslint.probe": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact",
        "html",
        "vue",
        "markdown",
        "saas"
    ],
    "editor.tabSize": 2,
    "workbench.iconTheme": "vscode-icons",
    "vsicons.dontShowNewVersionMessage": true,
    "editor.mouseWheelZoom": true,
    "json.schemas": []
}