本文目录
如何优雅地使用 VSCode 来编辑 vue 文件
先来扒一扒使用 PHPStorm 遇到的问题：vue文件虽然可以通过插件来解决高亮问题，但是 《script》 标签中的 ES6 代码的识别老是出问题，箭头函数有的时候能正确识别，有的时候会报错无法正确识别 vue 文件中的 jsx 语法无法正确识别和高亮 vue 文件 《style》 标签中使用的 less 语法vue文件中 《template》 部分使用了大量的自定义标签（自定义组件）和自定义属性，会报一堆 warning经常性卡死webpack实时编译的错误不能直接展示在代码器内，还得自己到控制台中查看如何安装 vscode很简单，传送门： 官网下载安装第一步，要支持 vue 文件的基本语法高亮这里，我试过好3个插件： vue , VueHelper 和 vetur ，最终选择使用 vetur 。安装插件： Ctrl + P 然后输入 ext install vetur 然后回车点安装即可。p.s: vscode 的插件安装比 PHPStorm 的插件安装更快捷方便，安装完成后还不用重启整个程序，只要重新加载下工作区窗口就可以了。安装完 vetur 后还需要加上这样一段配置下：“emmet.syntaxProfiles“: {“vue-html“: “html“,“vue“: “html“}这时可以打开一个vue文件试试，注意下右下角状态栏是否正确识别为 vue 类型：如果被识别为 text 或 html ，则记得要点击切换下。第二步，要支持 vue 文件的 ESLint可能还有人会问为什么要 ESLint ？没有 lint 的代码虽然也可能可以正确运行，但是 lint 作为编译前的一道检测成本更小，而且更快。此外， ESLint 还有很多规范是帮助我们写出更加优雅而不容易出错的代码的。jshint 本来也是个不错的选择，但是 ESLint 对 jsx 的支持让我还是选择了 ESLint.安装插件： Ctrl + P 然后输入 ext install eslint 然后回车点安装即可。ESLint 不是安装后就可以用的，还需要一些环境和配置：首先，需要全局的 ESLint , 如果没有安装可以使用 npm install -g eslint 来安装。其次，vue文件是类 HTML 的文件，为了支持对 vue 文件的 ESLint ，需要 eslint-plugin-html 这个插件。可以使用 npm install -g eslint-plugin-html 来安装接着，安装了 HTML 插件后，还需要在 vscode 中配置下 ESLint：“eslint.validate“: },最后，别忘了在项目根目录下创建 .eslintrc.json , 如果还没创建，还可以使用下面快捷命令来创建：这样一来 vue 中写的 js 代码也能正确地被 lint 了。要是不小心少个括号之类的都可以有对应的报错:多余 import 也都能报错:还是蛮智能的。第三步，配置构建任务vue 项目的构建我选择用 webpack ，不过，并不是直接使用命令行下的 webpack 而是使用了 webpack 的 API 写的 node 脚本。 脚本主要有两个，一个是 build/bin/build.js 另一个是 build/bin/watch.js 分别是单次构建和实时构建。于是乎，对应 vscode 中的 tasks 也是有两个： build 和 watch ，简单配置如下：{// See
vscode中vue怎么格式化代码
PS:现在推荐使用vetur插件win10崩溃，重装win7，结果sublime text插件无法安装，各种心塞，于是决定转战vscode。与sublime text相比，vscode有不少优点：中文输入法支持更好。在windows平台下，需要st支持中文输入需要安装各种插件，而且效果也是差强人意。基础功能更全面。vscode自带插件管理、git、sidebar、集成终端、emmet等功能，st每次都需要自己安装，浪费时间。但是st插件更丰富，vscode插件相对较少，vue相关插件vscode更是只有一个，而且使用起来有不少问题，并且作者已经很久没有更新了，折腾了一下午，最终可以用来编写vue项目了。vscode关于vue插件现在只有vscode-vue一个，安装完成代码提示并没有生效，这是因为vue文件的语言模式默认为html，需要在setting.json中设置：“files.associations“: {“*.vue“: “vue“}但是此时编写样式emmet插件不能正确识别，所以我后来也放弃了这种方式。仔细思考，编写vue项目主要需要：代码补全&代码片段emmet正确生成html标签emmet正确生成css、scss代码高亮其中2、3、4点，在html中都是可以做到的，而vue的代码补全与代码片段只需要自己编写就可以了，于是我将vue文件的语言模式还原为默认的html，在用户代码片段中加入vue文件需要的代码片段（文件-首选项-用户代码片段-html），最终效果还可以。添加的代码片段（持续更新）：{// Place your snippets for HTML here. Each snippet is defined under a snippet name and has a prefix, body and// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:// $1, $2 for tab stops, ${id} and ${id:label} and ${1:label} for variables. Variables with the same id are connected.// Example:“Print to console“: {“prefix“: “log“,“body“: ,“description“: “Create vue template“}}
如何配置vscode的python编译环境
为VSCode安装扩展 用VSCode编程是需要依赖扩展的。写Python需要安装python的扩展，写C++需要安装C++的扩展。刚打开器的时候，它一般会推荐一些扩展，你如果什么都不知道，可以先安装官方推荐的这些扩展： 修改VSCode的一些选项的默认值 VSCode有很多选项可以被修改，其各个选项都有默认值，这些默认值存储在“\settings.json“中(不过我没找到这个文件)，用户如果想修改某些选项的值（比如：修改字体的大小），VSCode会自动帮我们生成一个“settings.json”文件，然后我们直接在这个文件中配置自己想要的值即可。 VSCode还没有创建“settings.json“文件： VSCode帮我们创建了“settings.json“文件： 我们修改字号，让字体大一些。修改完后，保存一下，自定义的值就会覆盖默认值，修改就生效了。 用VSCode编写和调试python程序 下面就开始用VSCode编程了。因为python的配置超简单，我们以python为例来说明一下。
vscode 中的beautify 插件怎么用
1、在VSCODE中打开JSON文件，未格式化之前所JSON的数据全部都是贴在一起的，非常不容易阅读。
2、快捷键：CTRL+ALT+P打开搜索命令的窗口，在输入框内输入：extensions后找到【Install Extensions】选项后点击打开安装扩展程序窗口。
3、安装JSON美化插件在插件搜索框内搜索json并找到【Pretty JSON】插件，点击插件右下方的【Install】按钮进行安装。安装好后点击【Reload】按钮重新加载。
4、格式化JSON文件，在JSON文件内打开右键菜单会发现多了一个选项【Format Document】快捷键为【ALT+SHILF+F】。这时就可以格式美化JSON数据。
