我的VS CODE

X1nFLY 发布于2019-08-26 13:29 / 2796人阅读

摘要：对文件提供语法高亮和自动补全对小程序文件提供补全和语法高亮只需要键入就会有微信的提示使用做路径感知当我们在项目中集成的时候，经常会使用。

在日常开发中，我使用的编辑器是 VS CODE。不仅界面简洁好看，而且插件丰富，是前端开发的首选工具之一。这些插件和工具的目的是为了提高我们的开发效率，下面就我日常开发切身使用到和感受到有帮助的插件和方法做个总结。

VS CODE 常用的个人在用的插件

Chinese (Simplified) Language Pack for Visual Studio Code
为 vscode 提供中文界面

EditorCofig for VS Code
给 VS Code 项目应用全局的.editorconfig 设置，包括 Tab 空格数量，文件结尾符号等

Gitconfig Syntab
为.gitconfig, .gitattributes, .gitmodules 提供语法高亮

Mocha sidebar
macha 测试框架的 VS Code 支持

Path Intellisense
对.js 文件提供路径感知，提示功能。如何在.vue 文件中提供路径感知
只设置在工作区设置的话，只对当前工作区有效。

TODO Hightlight
TODO highlight.

Vetur
对.vue 文件提供语法高亮和自动补全

vscode wxml
对小程序.wxml 文件提供补全和语法高亮

vscode weapp api
只需要键入wx就会有微信api的提示

使用 jsconfig.json 做路径感知

当我们在项目中集成 webpack 的时候，经常会使用 webpack alias。在 VS Code 中，支持 alias,需要使用jsconfig.json。
很可惜，这个方法在.vue 文件中不支持，目前没有找到解决方案。不过我们可以使用上面的path intellisense插件来做路径提示。

如何使用 jsconfig.json 让 vscod 对 js 文件提供路径感知

{
    "compilerOptions": {
      "target": "es2017",
      "allowSyntheticDefaultImports": false,
      "baseUrl": "./",
      "paths": {
        "@/*": [ "src/apps/*" ],
        "app/*": [ "src/apps/*" ],
        "Components/*": [ "src/components/*" ],
        "services/*": [ "src/services/*" ],
        "style/*": [ "src/style/*" ]
      }
    },
    "exclude": [
      "node_modules",
      "dist",
      ".nyc_output",
      "build",
      "coverage"
    ]
}

解决 path intellisense 插件对‘/’的不支持

我们在 vscode 中设置 path intellisense 对"/"的支持

"path-intellisense.mappings": {
  "/": "${workspaceRoot}",
  "@": "${workspaceRoot}/src"
}

其中/ 和 vscode 本身的路径提示冲突，在这种情况下只会基于当前文件盘为根目录，需要关闭 vscode 本身对 js 代码 import 的智能提示(version 1.30.2)

{
  "javascript.suggest.paths": false
}

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108917.html

高效开发者是如何个性化VS Code插件与配置的？

摘要：由于本身不能个性化配置，有时可能会引起不适，但是至少保证团队成员可以轻易统一代码风格。就是将多于一个字母的合成一个字形。自从年双十一正式上线，累计处理了亿错误事件，得到了金山软件等众多知名用户的认可。译者按： IDE是生产力的保证！原文：Visual Studio Code Settings and Extensions for Faster JavaScript Develop...

shenhualong 2019-08-23 15:27 评论0 收藏0
VS Code上手与超实用插件安利

摘要：软件跨平台支持以及，运行流畅，可谓是微软的良心之作微软有这个宇宙最强，自然也不会弱宇宙最强编辑器说到代码编辑器，我们有必要提一提还有。原文链接：VS Code上手与超实用插件安利工欲善其事必先利其器 Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号...

miracledan 2019-08-21 17:46 评论0 收藏0
Sublime 和 VS Code编辑器你在用哪款（程序员代码编辑器推荐）

摘要：作为程序员，我们肯定会要选择代码编辑器，这里老蒋最近也准备重拾代码写点东西。既然这篇文章中提到和编辑器哪个好的问题，这里老蒋谈谈我的个人看法，毕竟我之前一直有在使用编辑器的，这个比较适合轻量级的用途的，比如简单的程序修改。作为程序员，我们肯定会要选择代码编辑器，这里老蒋最近也准备重拾代码写点东西。本来电脑里是有安装Sublime编辑器的，但是发现不清楚怎么情况自动升级导致需要提交序列号才可以...

Carson 2021-09-10 11:22 评论0 收藏0
VS Code + webpack 调式 lodash 源码（如何用VS Code调式ES6代码）

摘要：有限制就不灵活了，看源码文件，两百多个源码文件都是语法，文件名称是，想在中直接启动调式是不行的，还是需要用到才行。使用环境调式使得效率更高，直接再中阅读源码，直接调式看效果。文章首发：https://github.com/giscafer/g... 前言 node.js在 v8.5 版本之后可以直接支持ES6模块，但是有个限制就是，需要为.mjs后缀的文件才行，比如有个es6代码文件...

SHERlocked93 2019-08-21 18:27 评论0 收藏0
Visual Studio Code 断点调试 Vue

摘要：个人还是更加习惯于断点调试。这篇文章将介绍如何配置和来完成直接在断点调试代码并且在的调试窗口看到中相同的值。现在就可以在文件的代码中打断点进行调试了。很多人习惯在 Chrome 的调试窗口中调试 Vue 代码，或者直接使用 console.log 来观察变量值，这是非常痛苦的一件事，需要同时打开至少 3 个窗体。个人还是更加习惯于断点调试。这篇文章将介绍如何配置 Visual S...

qpwoeiru96 2019-08-22 14:51 评论0 收藏0