【专题版】前端开发工具(VSCode)

118 阅读2分钟

VSCode实用配置

VScode 快捷键

Mac 常用快捷键:

F1 或 command+Shift+P(俗称万能键):打开命令面板,输入相应的命令。比如常用的reload(重新加载VScode)
command+ p 输入 ?   列出当前可执行的动作
command+ p 输入 !   显示 Errors或 Warnings,也可以 command+Shift+M
command+ p 输入 @    跳转到 symbol(搜索变量或者函数),也可以 command+Shift+O 直接进入
command+ p 输入 @    根据分类跳转 symbol,查找属性或函数,也可以 command+Shift+O 后输入" : "进入\

跳转到行数:command+G 或者 command+ p 输入 :
文件之间切换:command+Tab
代码行向左或向右缩进:tab、shift + tab
多行编辑:option+鼠标左击
将当前行与上一行或下一行交换位置:option + ⬆️ / option + ⬇️
代码块切换折叠:command + K + command + L
代码块全部折叠:command + K + command + O
代码块全部展开:command + K + command + J
选中光标到行首内容:command + shift + ⬅️
选中光标到行尾内容:command + shift + ➡️
删除光标处到行首所有内容: command + Delete
删除光标到行尾所有内容:command + Fn + Delete
回退光标(光标定位到之前所在位置): command+ U
选中与光标紧挨或选定的内容(空格和符号除外): command + D(之后依次多选、当前页面中所有完全匹配的)
同时光标紧挨或选定的内容: command +shift+ L


当前页面代码格式化(保持不保存状态): option + shift + F
重构(查看所有引用):command+shift+R
整理import(排序,删除多余引用): shift+option+O
移动到定义处: F12
查看代码下一个异常: F7\

VScode实用插件

Vscode实用文件配置

.vscode/settings.json文件配置

//settings.json
{
  "auto-close-tag.activationOnLanguage": [
    "xml",
    "php",
    "blade",
    "ejs",
    "jinja",
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "plaintext",
    "markdown",
    "vue",
    "liquid",
    "erb",
    "lang-cfml",
    "cfml",
    "HTML (EEx)",
    "HTML (Eex)",
    "plist"
  ],
  "fileheader.customMade": {
    "Author": "fusanqiasng",
    "Date": "Do not edit", // 这里就得这么填,才能自动校准时间
    "LastEditors": "fusanqiasng",
    "LastEditTime": "Do not edit", // 这里就得这么填,才能自动校准时间
    "Description": "描述一下咯",
    "@Copyrigh": "© 2020 杭州杰竞科技有限公司 版权所有"
  },
	"files.autoSave": "10000",
  //#每次保存的时候将代码按eslint格式进行修复,vscode es6语法检测配置
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // 默认格式化程序为 prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.fontSize": 16,
  "editor.formatOnPaste": true, // 对粘贴进行格式化
  "editor.formatOnSave": true, //对保存后的文件格式化
  "editor.formatOnType": true,//对键入的信息格式化(键入一行后,就是输入“;”分号结束一行)
  //智能提示, 是否显示可能用到的示例代码.安装插件过多,建议选项也会非常多
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },
  "editor.suggest.snippetsPreventQuickSuggestions": false, // 解决输入log按tab快速生成代码后,
  "editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?", //快速全选 '-''_'之类的属性
  "editor.wordWrap": "on", // 控制折行方式。
  "editor.wordWrapColumn": 160, //换行长度
  "workbench.iconTheme": "vscode-icons", //文件图标
  "workbench.colorCustomizations": {
    "editorIndentGuide.activeBackground": "#ff0" // 设置guide线高亮颜色,可以改为自己喜欢的颜色
  },

  "javascript.updateImportsOnFileMove.enabled": "always", // 移动文件或者修改文件名时,是否自动更新引用了此文件的所有文件。
  "files.associations": {
    "*.vue": "vue",
    "*.jsx": "javascript",
    "*.wxss": "css",
    "*.wxs": "javascript",
    "*.cjson": "jsonc"
  },
  "emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html"
  },
  "eslint.options": {
    "extensions": [".js", ".vue", "jsx", "tsx", ".ts"]
  },
  "eslint.run": "onSave",
  "window.zoomLevel": -1,
  // git插件相关配置
  "git.confirmSync": true,
  "gitlens.keymap": "alternate",
  "gitlens.views.repositories.files.layout": "tree",
  "gitlens.views.lineHistory.enabled": true,
  "git.ignoreMissingGitWarning": true,
  "gitlens.gitCommands.skipConfirmations": ["fetch:command", "stash-push:command", "switch:command", "pull:menu"],
  "gitlens.gitCommands.closeOnFocusOut": true,
  "gitlens.advanced.messages": {
    "suppressCommitHasNoPreviousCommitWarning": false,
    "suppressCommitNotFoundWarning": false,
    "suppressFileNotUnderSourceControlWarning": false,
    "suppressGitVersionWarning": false,
    "suppressLineUncommittedWarning": false,
    "suppressNoRepositoryWarning": false,
    "suppressResultsExplorerNotice": true,
    "suppressShowKeyBindingsNotice": true,
    "suppressUpdateNotice": false,
    "suppressWelcomeNotice": true
  },

  // prettier相关配置
  // 在 JSX 文件中使用单引号代替双引号
  "prettier.jsxSingleQuote": true,
  // 使用单引号
  "prettier.singleQuote": true,
  // 是否使用 tab 代替 space(空格) 为单位缩进
  "prettier.useTabs": false,
  //结尾分号
  "prettier.semi": true,
  // 尾随逗号,在对象或数组最后一个元素后面是否加逗号(在ES5中加尾逗号)
  "prettier.trailingComma": "es5",
  // 括号空格,在对象字面量和括号之间添加空格
  "prettier.bracketSpacing": true,
  // 将多行 JSX 元素的 > 放置于最后一行的末尾,而非换行
  "prettier.jsxBracketSameLine": true,
  // 箭头函数单个参数加括号。avoid:省略括号
  "prettier.arrowParens": "always",
  // 超过最大值换行
  "prettier.printWidth": 160,
  //tab缩紧2个空格
  "prettier.tabWidth": 2,
  "prettier.proseWrap": "preserve",

  "emmet.includeLanguages": {
    "wxml": "html"
  },
  //todo插件高亮排除文件
  "todohighlight.exclude": ["**/config/**"],
  "minapp-vscode.disableAutoConfig": true,
  "[vue]": {
    "gitlens.codeLens.scopes": ["document"]
  },
  "diffEditor.ignoreTrimWhitespace": true,
  "commentTranslate.targetLanguage": "zh-CN"
}