1 软件下载

官网：https://code.visualstudio.com/

2 首页介绍

3 vscode设置成中文

1）方法一：

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

2）方法二：

可直接安装中文插件；

4 vscode用户设置

打开设置；文件–首选项–设置，打开用户设置，vscode支持选择配置，也支持编辑setting.json文件修改默认配置；原作者推荐编写json的方式进行配置，原配置代码如下：
常用配置项解析：
editor.fontsize用来设置字体大小，例可以设置editor.fontsize : 14；
files.autoSave属性是表示文件是否会进行自动保存，推荐设置onFocusChange–文件焦点变化时自动保存；
editor.tabCompletion用来在出现推荐值时，按下Tab键是否填入自动填入最佳推荐值，推荐设置为on；
editor.codeActionsOnSave中的source.organizeImports属性，这个属性能够在保存时，自动调整import语句相关顺序，能够让你的import语句按照字母顺序进行排序，推荐设置为true，即“editor.codeActionsOnSave”：{“source.organizeImports”: true}；
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
      }
  }
}

View Code

5 常用的快捷键

对于【行】的操作

重开一行：光标在行尾的话，回车即可；不在行尾，使用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 ：块区域注释；

6 插件安装

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

7 必备插件

open in browser：在浏览器里预览网页必备，运行html文件；View In Browser 已被弃用，可以使用open in browser 直接运行html文件；
vscode-icons：改变编辑器里面的文件图标；
Auto Rename Tag：自动修改匹配的HTML标签；
Path Intellisense：智能路径提示，可以在你输入文件路径时智能提示；
Markdown Preview：实现预览markdown；
stylelint：CSS/SCSS/Less语法检查；
Import Cost：引入包大小计算，对于项目打包后体积掌握很有帮助；
Prettier：比Beautify更好用的代码格式化插件；可以配置.prettierc.js文件,配合eslint、git hooks 一起使用，提升项目代码的规范性

module.exports = {
    // 一行最多 100 字符
    printWidth: 100,
    // 不使用缩进符，而使用空格
    useTabs: false,
    // 使用 4 个空格缩进
    tabWidth: 4,
    tabSize: 4,
    // 行尾需要有分号
    semi: true,
    // 使用单引号
    singleQuote: true,
    // 对象的 key 仅在必要时用引号
    quoteProps: 'as-needed',
    // jsx 不使用单引号，而使用双引号
    jsxSingleQuote: false,
    // 末尾不需要逗号 'es5'  none
    trailingComma: 'es5',
    // 大括号内的首尾需要空格
    bracketSpacing: true,
    // jsx 标签的反尖括号需要换行
    jsxBracketSameLine: false,
    // 箭头函数，只有一个参数的时候，也需要括号
    arrowParens: 'always',
    // 每个文件格式化的范围是文件的全部内容
    rangeStart: 0,
    rangeEnd: Infinity,
    // 不需要写文件开头的 @prettier
    requirePragma: false,
    // 不需要自动在文件开头插入 @prettier
    insertPragma: false,
    // 使用默认的折行标准
    proseWrap: 'preserve',
    // 根据显示样式决定 html 要不要折行
    htmlWhitespaceSensitivity: 'css',
    // 换行符使用 lf 结尾是 \n \r \n\r auto
    endOfLine: 'lf',
};

View Code

code runner：直接运行.js等文件，在控制台输出结果；

8 其他插件

Turbo Console Log 快速添加console.log，一键注释/启用/删除所有console.log；该插件使用到的快捷键如下：

ctrl+alt+l选中变量之后，使用这个快捷键生成console.log；

　　　 alt+shift+c注释所有console.log；

alt+shift+u启用所有console.log；

alt+shift+d删除所有console.log;

change-case：转换命名风格；
CSS Peek：定位CSS类名；
Regex Previewer：实时预览正则表达式的效果。

原文链接：https://zhuanlan.zhihu.com/p/113222681?utm_oi=634533649492611072&utm_id=0

今天的文章vscode配置使用教程分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/57227.html

vscode配置使用教程