编程部落

VSCode怎么用? 史上超全vscode配置使用教程

Written by

风君子

in

文章目录

工欲善其事，必先利其器。想要优雅且高效的编写代码，必须熟练使用一款前端开发工具。但前端开发工具数不胜数，像HBuilder、Sublime Text、WebStorm、Visual Studio Code……等等,其中VSCode以其轻量且强大的代码编辑功能和丰富的插件生态系统，独受前端工师的青睐。网上有很多vscode的配置以及使用博客，但都没有本篇那么详细且全面。

直接在官网进行下载，后者下载我们准备好的。

Visual Studio Code insider 32/64位 v1.86.0 官方最新安装版

  • 类型：编程工具
  • 大小：178MB
  • 语言：简体中文
  • 时间：2023-12-12

查看详情

首页

vscode默认的语言是英文，对于英文不好的小伙伴可能不太友好。简单几步教大家如何将vscode设置成中文。

  • 按快捷键“Ctrl+Shift+P”。
  • 在“vscode”顶部会出现一个搜索框。
  • 输入“configure language”，然后回车。
  • “vscode”里面就会打开一个语言配置文件。
  • 将“en-us”修改成“zh-cn”。
  • 按“Ctrl+S”保存设置。
  • 关闭“vscode”，再次打开就可以看到中文界面了。

当然如果你不愿意设置，也可以直接安装它的中文插件，还是很人性化的。

1. 打开设置

文件–首选项–设置，打开用户设置。VScode支持选择配置，也支持编辑setting.json文件修改默认配置。个人更倾向于编写json的方式进行配置，下面会附上我个人的配置代码

这里解析几个常用配置项：

  • （1）editor.fontsize用来设置字体大小，可以设置editor.fontsize : 14;
  • （2）files.autoSave这个属性是表示文件是否进行自动保存，推荐设置为onFocusChange——文件焦点变化时自动保存。
  • （3）editor.tabCompletion用来在出现推荐值时，按下Tab键是否自动填入最佳推荐值，推荐设置为on;
  • （4）editor.codeActionsOnSave中的source.organizeImports属性，这个属性能够在保存时，自动调整 import 语句相关顺序，能够让你的 import 语句按照字母顺序进行排列，推荐设置为true,即"editor.codeActionsOnSave": { "source.organizeImports": true }；
  • （5）editor.lineNumbers设置代码行号,即editor.lineNumbers ：true；

我的个人配置，供参考：

{
  "files.associations": {
  "*.vue": "vue",
  "*.wpy": "vue",
  "*.wxml": "html",
  "*.wxss": "css"
  },
  "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe",
  "git.enableSmartCommit": true,
  "git.autofetch": true,
  "emmet.triggerExpansionOnTab": true,
  "emmet.showAbbreviationSuggestions": true,
  "emmet.showExpandedAbbreviation": "always",
  "emmet.includeLanguages": {
  "vue-html": "html",
  "vue": "html",
  "wpy": "html"
  },
  //主题颜色 
  //"workbench.colorTheme": "Monokai",
  "git.confirmSync": false,
  "explorer.confirmDelete": false,
  "editor.fontSize": 14,
  "window.zoomLevel": 1,
  "editor.wordWrap": "on",
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  //失去焦点后自动保存
  "files.autoSave": "onFocusChange",
  // #值设置为true时，每次保存的时候自动格式化；
  "editor.formatOnSave": false,
   //每120行就显示一条线
  "editor.rulers": [
  ],
  // 在使用搜索功能时，将这些文件夹/文件排除在外
  "search.exclude": {
      "**/node_modules": true,
      "**/bower_components": true,
      "**/target": true,
      "**/logs": true,
  }, 
  // 这些文件将不会显示在工作空间中
  "files.exclude": {
      "**/.git": true,
      "**/.svn": true,
      "**/.hg": true,
      "**/CVS": true,
      "**/.DS_Store": true,
      "**/*.js": {
          "when": "$(basename).ts" //ts编译后生成的js文件将不会显示在工作空中
      },
      "**/node_modules": true
  }, 
  // #让vue中的js按"prettier"格式进行格式化
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatterOptions": {
      "js-beautify-html": {
          // #vue组件中html代码格式化样式
          "wrap_attributes": "force-aligned", //也可以设置为“auto”，效果会不一样
          "wrap_line_length": 200,
          "end_with_newline": false,
          "semi": false,
          "singleQuote": true
      },
      "prettier": {
          "semi": false,
          "singleQuote": true
      }
  }
}

最近经常有人微信问我，这个配置代码写在哪里？

新版的vscode设置默认为UI的设置，而非之前的json设置。如果你想复制我上面这段代码进行配置，可以进行下面的修改

文件>首选项>设置 > 搜索workbench.settings.editor，选中json即可改成json设置；

文件 > 首选项 > 设置（macOS：代码 > 首选项 > 设置，搜索update mode并将设置更改为none。

第一步：点击左下角点击设置图标，找到并点击“setting”

第二步：到搜索框里搜索“prevent”—>并取消此项的勾选

高效的使用vscode,记住一些常用的快捷键是必不可少的，我给大家罗列了一些日常工作过程中用的多的快捷键。

以下以Windows为主，windows的 Ctrl，mac下换成Command就行了

对于 行 的操作：

  • 重开一行：光标在行尾的话，回车即可；不在行尾，ctrl + enter 向下重开一行；ctrl+shift + enter 则是在上一行重开一行
  • 删除一行：光标没有选择内容时，ctrl + x 剪切一行；ctrl +shift + k 直接删除一行
  • 移动一行：alt + ↑ 向上移动一行；alt + ↓ 向下移动一行
  • 复制一行：shift + alt + ↓ 向下复制一行；shift + alt + ↑ 向上复制一行
  • ctrl + z 回退

对于 词 的操作：

选中一个词：ctrl + d

搜索或者替换：

  • ctrl + f ：搜索
  • ctrl + alt + f： 替换
  • ctrl + shift + f：在项目内搜索

通过Ctrl + ` 可以打开或关闭终端

Ctrl+P 快速打开最近打开的文件

Ctrl+Shift+N 打开新的编辑器窗口

Ctrl+Shift+W 关闭编辑器

Home 光标跳转到行头

End 光标跳转到行尾

Ctrl + Home 跳转到页头

Ctrl + End 跳转到页尾

Ctrl + Shift + [ 折叠区域代码

Ctrl + Shift + ] 展开区域代码

Ctrl + / 添加关闭行注释

Shift + Alt +A 块区域注释

在输入框中输入想要安装的插件名称，点击安装即可。安装后没有效果，可以重启vscode

必备插件1、open in browser

在浏览器里预览网页必备。运行html文件

View In Browser 已被弃用，可以使用open in browser 直接运行html文件

2、vscode-icons

改变编辑器里面的文件图标

3、Auto Rename Tag

自动修改匹配的 HTML 标签。

4、Path Intellisense

智能路径提示，可以在你输入文件路径时智能提示。

5、Markdown Preview

实时预览 markdown。

6、stylelint

CSS / SCSS / Less 语法检查

7、Import Cost

引入包大小计算,对于项目打包后体积掌握很有帮助

上一页12 3 下一页 阅读全文

More posts

站内搜索

标签云

iphone 三星 信用卡 信贷 华为 小米 微软 快科技 手机 投资理财 支付宝 特斯拉 理财知识 电脑 科技 程序 股票 芯片 苹果 贷款 路由器 银行 银行卡 额度

热门文章

友情链接