专栏首页python爱好部落提高你的编码效率

提高你的编码效率

市面的编辑工具五花八门,简单的有sublime, notepad++, vim, Atom等,复杂的有webstorm, pycharm,eclipse, visual studio, Android studio, xcode等。 每个编辑器各有千秋。

但是我发现一个编辑器,用过之后就不想用别的编辑器了。也许我孤陋寡闻,知道得比较晚。他就是vscode.

我一向是对微软的东西不太感冒的。傻瓜式,大而全,慢。 唯独这个工具彻底改变了我的看法。

Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux。 vscode 作为一款逐渐火热的编辑器。它的特点免费、开源、多平台,以及集成git,代码调试,插件丰富等优点。

先是安装,就不说了。自己去官网下载。

对于程序员来说,大部分时间都是在跟编辑器在打交道。可以说是程序员的小情人都不为过。 对于情人,我们希望他能漂亮,善解人意,能力出众,温柔贤惠。对于编辑器来说,要能设置漂亮的界面,能够代码提示和自动补全,能够支持各种语言和代码检查,能够方便快捷的操作。

感觉VScode就是集成了各种编辑器的优点。 他可以输入命令行: 可以分屏幕; 代码补全和提示;还有各种插件和快捷方式。

好了,废话不多说,来看看它的庐山真面目吧。

左边的第一个就是文档区,各种打开的项目,文档可以通过第一个来查看。 第二个就是快捷查找的。 第三个代码管理,直接集成git。 第四个就是调试工具。 第五个就是插件库了。丰富的插件,让你的效率大大提高。 个人可以根据自己的需要安装。

安装好了以后,我们先做初步的配置。 我们先安装几个必备的插件。

vscode-icons: 这个装完以后,各种文件就可看到类型
project-manager:管理项目的
code runner: 运行代码的
debugger for chrome:  在编辑器中打断点,让你轻松地在Chrome里调试

这些还不够,我们看看还有哪些值得拥有的插件。

一、代码补全

Auto Close Tag 适用于 JSX、Vue、HTML,能自动补全要闭合的标签

Auto Rename Tag 适用于 JSX、Vue、HTML,在修改标签名时,能在你修改开始(结束)标签的时候修改对应的结束(开始)标签,帮你减少 50% 的击键

Document This 自动生成 JSDoc 注释,快捷键ctrl+alt+d ctrl+alt+d。或者在function上输入/**然后tab键也可以生成注释。

Npm Intellisense NPM 依赖补全,在你引入任何 node_modules 里面的依赖包时提供智能提示和自动完成,会提示已安装的模块名

Path Intellisense 文件路径补全,在你用任何方式引入文件系统中的路径时提供智能提示和自动完成

VueHelper Vue2代码段(包括Vue2 api、vue-router2、vuex2)

HTML Snippets 各种 HTML 标签片段,可简写

IntelliSense for CSS class names CSS 类名补全,会自动扫描整个项目里面的 CSS 类名并在你输入类名时做智能提示

jQuery Code Snippets jQuery代码提示

React.js Code Snippets React代码提示

二、代码格式化和质量保证

ESLint Javascript语法检测,高亮提示

Code Spell Checker 单词拼写检查

HTMLHint HTML语法错误检查

markdownlint Markdown格式提示

vetur Vue 开发生态必备插件(官方推荐),处理的是.vue 文件,支持 Syntax Highlighting, Emmet 2.0,Snippet,Foramtting,IntelliSense,Linting 等

Beautify 代码格式化

vscode-icons 给不同类型的文件加上图标,方便文件查找

filesize 在底部状态栏显示当前文件大小,点击后还可以看到详细创建、修改时间、gzip压缩后的大小等。

Markdown All In One Markdown 格式化

TODO Highlight 这个插件能够在你的代码中标记出所有的 TODO 注释,以便更容易追踪任何未完成的业务。在默认的情况下,它会查找 TODO 和 FIXME 关键字。当然,你也可以添加自定义表达式。

三、代码预览与测试

Code Runner 运行选中代码段(支持大量语言,包括Node)

Open in Browser 在浏览器中打开

Markdown PDF Markdown 转 PDF

四、版本控制

Git Blame 在状态栏显示当前行的Git信息

Git History(git log) 查看git log

GitLens 显示文件最近的commit和作者,显示当前行commit信息

五、其它插件

切换项目 Project Manager 项目管理,让我们方便的在命令面板中切换项目文件夹.

代码跟踪 vue peek 用于跟踪vue.js代码的工具

代码片段比对 Partial Diff 对比两段代码或文件

讲了这么多插件,那这些插件怎么配置呢?下面附上我的VSCode配置文件供大家参考:

{
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.fontSize": 18,
  "editor.wordWrap": "on",
  "editor.detectIndentation": false,
  "editor.cursorBlinking": "smooth",
  "editor.formatOnPaste": true,
  // 是否允许自定义的snippet片段提示,比如自定义的vue片段开启后就可以智能提示
  "editor.snippetSuggestions": "top",
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 500,
  "files.trimTrailingWhitespace": true,
  // 配置文件关联,以便启用对应的智能提示,比如wxss使用css
  "files.associations": {
    "*.vue": "vue",
    "*.wxss": "css"
  },
  // 配置emmet是否启用tab展开缩写
  "emmet.triggerExpansionOnTab": true,
  // 配置emmet对文件类型的支持,比如vue后缀文件按照html文件来进行emmet扩写
  "emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html",
    "javascript": "javascriptreact",
    // xml类型文件默认都是单引号,开启对非单引号的emmet识别
    "xml": {
      "attr_quotes": "single"
    }
  },
  // 在react的jsx中添加对emmet的支持
  "emmet.includeLanguages": {
    "jsx-sublime-babel-tags": "javascriptreact"
  },
  // 是否开启eslint检测
  "eslint.enable": false,
  // 文件保存时,是否自动根据eslint进行格式化
  "eslint.autoFixOnSave": false,
  // eslint配置文件
  "eslint.options": {
    "plugins": [
      "html",
      "javascript",
      {
        "language": "vue",
        "autoFix": true
      },
      "vue"
    ]
  },
  // eslint能够识别的文件后缀类型
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue",
    "typescript",
    "typescriptreact"
  ],
  // 格式化快捷键 shirt+alt+F
  // prettier进行格式化时是否安装eslint配置去执行,建议false
  "prettier.eslintIntegration": true,
  // 如果为true,将使用单引号而不是双引号
  "prettier.singleQuote": true,
  "prettier.tabWidth": 2,
  // vetur插件格式化使用beautify内置规则
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // 下面这一段不能少,否则导致VSCode格式化代码时无法正确格式化vue的style和script块(缩进为4个空格)。
  "beautify.language": {
    "js": {
      "type": [
        "javascript",
        "json"
      ],
      "filename": [
        ".jshintrc",
        ".jsbeautify"
      ]
    },
    "css": [
      "css",
      "scss",
      "less"
    ],
    "html": [
      "htm",
      "html",
      "vue"
    ]
  },
  "gitlens.keymap": "chorded",
  "gitlens.historyExplorer.enabled": true,
  "gitlens.advanced.messages": {
    "suppressShowKeyBindingsNotice": true
  },
  "sync.gist": "mobilesite"
}

当然插件还远不止这么多,记住一些关键的,用得着的就可以了,不行的话,自己搜搜。 比如我如果开发网页多一点,就可以在插件市场里搜关于htm, css的插件。

HTML Snippets
HTML CSS Support

这样它就自动提示html和CSS, 错了也能帮你指出来。

六、快捷键

1、关于 窗口 的操作 新开窗口:ctl + shift + n 关闭窗口:ctrl + shift + w 放大/缩小字号:ctrl + +/- 显示和隐藏侧边栏:Ctrl + B 2、关于 分栏 的操作 新建一个分栏(编辑器):ctrl + \ (最多允许三个分栏) 选中某个分栏:ctrl + 1/2/3 数字表示要选中的是第几个分栏 3、关于 文件 的操作 新建文件: ctrl + n 关闭当前文件:ctrl + F4 打开文件:ctrl + o 打开的文件之间切换:ctrl + tab 4、关于 行 的操作 新开一行:光标在行尾的话,回车即可;光标不在行尾,ctrl + enter 向下重开一行;ctrl + shift + enter 则是在上一行重开一行

删除一行:光标没有选择内容时,ctrl + x 剪切一行;ctrl + shift + k 直接删除一行

移动一行:alt + ↑ 向上移动一行;alt + ↓ 向下移动一行

复制出一行:alt + shift + ↓ 向下复制一行;alt + shift + ↑ 向上复制一行

复制或剪切当前行/当前选中内容到剪切板:Ctrl+C

粘贴:ctrl + v

代码行缩进:减少缩进 Ctrl + [ 、 增加缩进 Ctrl + ]

5、关于 词 的操作 选中一个词:ctrl + d

搜索/替换:

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

格式化整个文件的代码:shift + alt + f

6、关于 光标 的操作 移动到行首:Home

移动到行尾:End

移动到文件开头:Ctrl + Home

移动到文件结尾:Ctrl + End

选择从行首到光标处:Shift + Home

选择从光标到行尾:Shift + End

删除光标右侧的所有字:Ctrl + Delete

多行编辑(列编辑):Alt + Shift + 鼠标左键

同时选中所有匹配:Ctrl + Shift + L

下一个匹配的也被选中:Ctrl + D

回退上一个光标操作:Ctrl + U

7、关于 主命令框 的操作 打开命令面板:ctrl + shift + p

在打开的输入框内,可以输入任何命令。按一下 Backspace 会进入到 Ctrl + P 模式。

在 Ctrl + P 模式下输入 > 可以进入 Ctrl + Shift + P 模式

在 Ctrl + P 窗口下还可以:

直接输入文件名,跳转到文件:

? 列出当前可执行的动作

! 显示 Errors或 Warnings,也可以 Ctrl + Shift + M

: 跳转到行数,也可以 Ctrl+G 直接进入

Opos! 这么多,而且系统不同,快捷键也不同,怎么记哈。 其实很多快捷键跟其它编辑器的快捷键是差不多的。 只要记住关键的几个就可以了。

我们大部分时间都在搬砖,如果能自动提示,也就省去了我们很多记忆加手动的时间。

举个例子,如果我们想快速写一个html文件。 首先用 ctrl + n这个快捷键打开一个文件。 在右侧底部边栏选 select language mode中选html 然后在文本中编辑,敲一个!, 然后敲tab键。代码就自动给生成了。

如果你敲一个tag,它自动跟你补全tag. 然后按一个快捷键,alt+B 自动跟你在浏览器中显示出来了。 自己基本没做什么操作。 前提是你得装几个插件。

Auto close tag
open in browser

当你对插件不熟悉的话,可以看插件的介绍,例如这样。

调试爽了,问题也就更能看清楚了。

本文分享自微信公众号 - python爱好部落(lovesweet2018)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-09-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue/cle3项目运行报错sockjs-node/info解决方案

      继上次将vue项目脚手架工具从vue-cli2.x升级到vue-cli3.x后,除了环境、配置问题外,在运行时出现了一些个新的问题。  启动项目后,在内网非...

    流眸
  • 使用mpvue开发小程序教程

    网上一搜,解决的方法通常也是五花八门的,什么通过app上的globalData啊、通过存取storage啊、通过一个单独的模块(module)啊、通过Page路...

    极乐君
  • 8 道高频出现的 Vue 面试题及答案

    MVP 模式将 Controller 改名为 Presenter,同时改变了通信方向。

    夜尽天明
  • 后端小白的 Vue 入门笔记 —— 进阶篇

    出处:https://www.cnblogs.com/ZhuChangwu/p/11325489.html

    IT技术小咖
  • PWA入门:手把手教你制作一个PWA应用

    Web前端的同学是否想过学习app开发,以弥补自己移动端能力的不足?但在面对一众的选择时很多同学略感迷茫,是学习ios还是android开发?是学习原生开发、混...

    Fundebug
  • 后端小白的 Vue 入门笔记 —— 基础篇

    出处:https://www.cnblogs.com/ZhuChangwu/p/11303521.html

    IT技术小咖
  • 2019年要学习的前5个前端开发主题

    TypeScript是2018年最令人惊讶的增长故事之一.npm调查发现,有46%的npm用户使用TypeScript。它现在不仅是使用Angular的默认语言...

    技术小工
  • Vue归纳笔记:Vue 实例如何实现代理 data 对象属性的访问

    对于初学Vue.js的小伙伴而言,可能会认为Vue实例是一个很神奇的东西!因为它除了帮助我们完成双向绑定之外,还在某些细节方面为我们增加了一些理解上面的小烦恼!...

    用户1272076
  • vscode+eslint让你编程快到飞起

    Ewall
  • Vue知识点

    MVVM 是 Model-View-ViewModel 的缩写。 Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑。 View 代表...

    杨肆月

扫码关注云+社区

领取腾讯云代金券