vscode

小白第二课:环境搭建 VUE Node.js VSCode template模板

拟墨画扇 提交于 2019-11-29 16:25:39
环境搭建 VUE Node.js VSCode template模板: 首先安装node: http://www.runoob.com/nodejs/nodejs-install-setup.html 进入命令行模式: win+r ---->cmd cd f:\ md vuetest cd vuetest 安装webpack:npm install webpack -g 安装vue脚手架:npm install vue-cli -g 创建项目:vue init webpack proj Use ESLint to lint your code:这个是代码警告提示这个很烦人的建议最好不要 项目目录: 安装项目依赖:npm install 安装 vue 路由模块vue-router和网络请求模块vue-resource:cnpm install vue-router vue-resource --save 安装elementui:npm install element-ui --save 安装vue的gridster:npm install vue-power-drag 安装echarts:npm install echarts -S 安装axios惊醒HTTP请求: npm install axios VSCode下: ctrl_s 保存文件的同时开始编译,

使用typescript与nodejs开发应用

故事扮演 提交于 2019-11-29 16:23:49
在ts出来后受到的关注越来越大,尤其是配合vscode编辑器的时候,语法提示可以提高我们的工作效率。 我们想要使用ts开发nodejs应用就需要把ts文件编译成为js文件,这样才可以在nodejs中运行起来,这篇文章介绍如何在nodejs使用ts进行开发。 环境搭建 首先我们需要安装 ts-node 与 typescript npm install -g ts-node npm install -g typescript 全局安装完成后可以测试一下是否安装成功 $ ts-node -v v8.3.0 $ tsc -v Version 3.5.2 我们分别打印一下版本信息 构建应用 我们创建一个 main.ts 文件,内容可以简单一些 let str:string = "这是用来测试的内容" console.log(str) 看看是否可以直接运行 main.ts 文件 ts-node main.ts 我们也可以把此命令添加到 package.json 文件中 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start":"ts-node src/main.ts" }, 这是我们只需要运行 npm run start 结果与我们直接使用 ts-node 命令是一样的 使用 typescript

vscode+typescript开发环境搭建

微笑、不失礼 提交于 2019-11-29 11:31:19
好久没写博客了,趁着端午节期间研究了下typescript,把环境搭建方法和步骤记录下来。 貌似现阶段只有vscode对typescript支持的最好,可以直接debug ts脚本!貌似webstorm也只是能debug编译后的js,无法直接debug ts脚本。 npm要使用最新版本,可以在官网下载并用符号链接配置到 /usr/bin/npm下去。 2.安装 2.1 安装typescript $ npm install -g typescript //typescript程序 $ npm install -g ts-node //这是一个typescript的交互式 控制台,可以用来调试ts脚本,不然只能调试编译后的js 3.配置开发环境 3.1. 初始化 npm init 目录结构 /src/ts //这个目录用来放ts代码 /src/build //这个目录用来存放编译的js 3.2.添加tsconfig.json 3.2.1.自动创建 $ tsc - init 执行后可以自动创建tsconfig.json文件,包含tsconfig.json的目录就是根目录,区域配置也要放到这个目录 也可以手工创建 { "compilerOptions": { "module": "commonjs", "noImplicitAny": true, "removeComments":

vscode 下编译window api

谁都会走 提交于 2019-11-29 10:00:32
{ // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "2.0.0", "tasks": [ { "label": "build", "type": "shell", "command": "C:\\Program Files (x86)\\Microsoft Visual Studio\\2017\\BuildTools\\MSBuild\\15.0\\Bin\\msbuild", "args": [ "myapp.vcxproj", "/property:GenerateFullPaths=true", "/t:build", "/p:TargetVersion=Windows10", "/p:TargetPlatformVersion=10.0.17763.0", "/consoleloggerparameters:NoSummary" ], "group": "build", "presentation": {}, "problemMatcher": "$msCompile" }, { "label": "gccbuild", "type": "shell", "command": "C:\

VSCode和VUE的初始安装及简单使用入门

那年仲夏 提交于 2019-11-29 09:52:58
(版本2.0) 一:安装Node.js 在Node.js官网https://nodejs.org/en/download/下载安装包。 下载后进行安装。 打开命令行,输入node -v可以查看到版本号。输入npm –v可看到npm版本号。新版的Node.js已自带npm(类似.net中的nuget包管理器),安装Node.js时会一起安装。(将来要更新npm可用这个命令npm intall npm@latest -g) 配置环境变量(这里就会自动配置好)。 命令行中输入node, 再输入console.log("hello"); 用来验证是否安装成功。 配置npm的全局模块的存放路径和缓存路径,在node.js的安装目录下新建node-cache和node_global两个文件夹,然后命令行输入: npm config set prefix "c:\Program Files\nodejs\node_global" npm config set cache "c:\Program Files\nodejs\node_cache" 将来用npm install xxx -g 安装以后的模块就在这两个文件夹里。 配置npm的环境变量:系统变量path中新增一个变量: C:\Program Files\nodejs\node_global\node_modules,

npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确, 然后再试一次

不想你离开。 提交于 2019-11-29 08:22:35
情景 在第一次初启项目时,安装好node,并且cmd中执行命令node -v和npm -v 均可查出已安装的版本,在vscode中一直报错 报错内容 在vscode 编辑器中,报错内容如下: npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确, 然后再试一次 解决 ① 在vscode中要单独设置其属性兼容性,以管理员身份运行 ② 使用cmd执行命令 来源: https://blog.csdn.net/qq_43246012/article/details/100668988

VsCode写Python代码!这代码简直和大神一样规范!太漂亮了!

人走茶凉 提交于 2019-11-29 07:03:08
VsCode虽然没有Pycharm的功能齐全,但是也是有他的独特之处!今天就让大家见识一下,用VsCode写出的代码是怎么样的吧! 配置flake8 安装flake8之后写代码的时候编辑器就会提示哪里出错,代码格式不规范也会提示 打开命令行 输入 “pip install flake8” 安装flake8成功后,打开VScode,文件->首选项->用户设置,在settings.json文件中输入"python.linting.flake8Enabled": true 隐藏菜单栏 这个属于个人习惯,如果你也感觉菜单栏很碍眼,可以点击查看->切换菜单栏,即可隐藏菜单栏。需要菜单栏的时候按Alt键即可查看 设置快捷键 文件->首选项->键盘快捷方式,将需要的修改的快捷键的整个大括号里面的内容复制到右边keybindings.json文件中,然后修改“key”的值为你需要的快捷键即可。我这边只修改了复制一行和删除一行的快捷键。 如果你依然在编程的世界里迷茫,可以加入我们的Python学习扣qun:784758214,看看前辈们是如何学习的。交流经验。从基础的python脚本到web开发、爬虫、django、数据挖掘等,零基础到项目实战的资料都有整理。送给每一位python的小伙伴!分享一些学习的方法和需要注意的小细节,点击加入我们的 python学习者聚集地 有必须要的话重启下vscode

VSCode 小鸡汤 第01期 - REST Client 简单好用的接口测试辅助工具

喜夏-厌秋 提交于 2019-11-29 06:11:08
介绍 今天给大家介绍一个后端开发辅助的好工具 —— REST Client,插件如其名这就是一个 REST 的客户端插件,把我们的 VSCode 转化为一个 REST 接口测试的利器 我们一般都会用 PostMan 来完成接口测试的工作,因为用起来十分简单快捷,但是一直以来我也在寻找更好的方案,一个不用切换窗口多开一个 app 的方案 —— 终于在使用 VSCode 一段时版本间,我找到了 REST Client 插件,初看 REST Client 插件的时候,会觉得他十分的简陋,但是在使用一段时间后会发现在 REST Client 插件中已经有完成接口测试所需的所有东西 优势 基于 HTTP 语言,HTTP 语言是一门非常简单的语言,使用 HTTP 语言可以轻松的描述请求 纯文本记录,不同于 PostMan 保存在云端,或是 Paw 那样保存二进制文件,并且纯文本可以使用 git 追踪内容的变化 无需切换窗口,测试,调试,代码编辑都在一个 VSCode 中完成 劣势 操作和使用不像 PostMan 之类的图形化工具那么直观 不支持请求前后对数据进行操作的脚本,不过这个已经在作者的开发计划中 很多时候我们只是需要写完代码后手边有一个小工具可以轻松愉快的看一眼接口是否正常,那么 REST Client 就是我们的首选了 使用介绍 安装和入门 插件的安装非常简单,搜索

vscode同步插件 sync(gist,token)

早过忘川 提交于 2019-11-29 05:05:26
网上很多同步教程,按照教程操作upload时一直报错:sync:invalid gist ID 查找问题很久才知道 gist和token是两个东西。下面重新梳理下: 一、下载安装插件 Setting sync 二、github上生成gist 进入 your gists 随便给自己的gist起个名,添加内容,然后"Create secret gist" 上图中的af0d9d448e78f5adfe6bc94418fe7034就是gist 三、生成token(见网上其他教程) 四、vscode配置gist和token vscode里: 1,、Ctrl + P调出命令框 2、输入>sync:advanced option 3、找到打开设置 4、出现下面的设置界面 其中的Gist ID 就是我们上面获取的Gist ID,令牌就是其他教程里(如下图)生成的token 填完毕后回车自动更新json. 5、shift+alt+u :将本地配置上传到github上 6、在其他设备上,下载sync插件,shift+alt+d :从github上下载配置到本地。 来源: https://www.cnblogs.com/hebdzw/p/11456325.html

VScode设置vue文件中保存自动格式化代码以及settings.json文件的配置。

我们两清 提交于 2019-11-29 05:04:09
最近在做vue 项目中,由于安装有代码检测工具ESlint , 每次写完代码后就发现很多语法警告,查找配置好多也有许些小问题,现记录一份settings.json配置文件。 1、设置如下: 2、settings.json文件配置如下: { // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSize": 2, // #每次保存的时候自动格式化 "editor.formatOnSave": true, // #每次保存的时候将代码按eslint格式进行修复 "eslint.autoFixOnSave": true, // 添加 vue 支持 "eslint.validate": [ "javascript", "javascriptreact", { "language": "vue", "autoFix": true } ], // #让prettier使用eslint的代码格式进行校验 "prettier.eslintIntegration": true, // #去掉代码结尾的分号 "prettier.semi": false, // #使用带引号替代双引号 "prettier.singleQuote": true, // #让函数(名