首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >提高你的编码效率

提高你的编码效率

作者头像
赵云龙龙
发布2019-09-05 16:15:40
1.6K0
发布2019-09-05 16:15:40
举报
文章被收录于专栏:python爱好部落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

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

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

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-09-03,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 python爱好部落 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、代码补全
  • 二、代码格式化和质量保证
  • 三、代码预览与测试
  • 四、版本控制
  • 五、其它插件
  • 六、快捷键
相关产品与服务
项目管理
CODING 项目管理(CODING Project Management,CODING-PM)工具包含迭代管理、需求管理、任务管理、缺陷管理、文件/wiki 等功能,适用于研发团队进行项目管理或敏捷开发实践。结合敏捷研发理念,帮助您对产品进行迭代规划,让每个迭代中的需求、任务、缺陷无障碍沟通流转, 让项目开发过程风险可控,达到可持续性快速迭代。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档