vscode怎么运行前端(用vscode搭建前端环境)

vscode怎么运行代码 怎么操作

1、我们打开了一个脚本文件,希望直接执行这个脚本文件,就可以打开命令面板,运行 “在活动终端中运行活动文件”(Run Active File In Active Terminal),这样这个脚本就会在当前打开的集成终端中运行了。”

2、我们也可以选中编辑器中的某段代码,然后打开命令面板,运行“在活动终端中运行所选文本”(Run Selected Text In Active Terminal),这段代码就会在终端中执行。

前端跨域解决 (vscode live server proxy 代理)

这个显然是处理前端跨域最优的方法了,在此记录下来方便以后使用,附送scss 转 css

使用 vscode IDE作为编写工具

1.搜索并加载 vscode 插件 live server

2.要文件根目录创建 ".vscode" 目录

3.在 .vscode 目录下创建settings.json

4.proxUri 为代理的目标地址

5.baseUri 识别代理的符号 (如下例中 baseUri: '/api', 则以"/api"开头的网络请求都将被识别为需要代理转发的地址,并把 ‘/api’重写为空"")

1.ajax请求会受到浏览器同源策略的限制(同源 = 域名 + 端口 都一致)

2.ajax请求默认携带 同源下的所有cookie, 如果不做限制 a 去请求 b 的时候就等于把a所有的cookie 都告诉b。

3.同源下: 张三的网站只能访问张三的内容如鞋子衣服吃饭等等,如果想访问李四的,浏览器就不让你干了。如果充许这么干的话,张三的cookie隐私将直接暴露给李四,李四有可能干一些不怀好意的事情。

4.跨域情况:张三把钱都放在李四那里,现在张三想去李四那边取钱,这时候就需要跨域了。

5.跨域怎么解决呢?接下来把解决问题的思路简单描绘一下。

5.1:李四告诉全世界说我对钱不感兴趣,只要我有,你们所有人都随便来取。因此,当浏览器看到张三要取钱的人是李四这种慈善家,就不再拦着你了。

5.2:李四不是慈善家怎么办?于是张三这个时候就很讨厌浏览器,想了个办法绕过浏览器,然后另外找了个代理去跟李四取钱

5.2.1: 问题是绕过浏览器?怎么绕呢? 于是张三自己建了个服务器,每次要跟李四取钱的时候就欺骗浏览器说我要跟自己的服务器取钱,浏览器这个时候也就不再拦着你了

5.2.2:当张三自己的服务器接收到跟李四取钱任务后,就以proxy代理的身份向李四取钱,取完钱之后再通过浏览器给了张三

5.2.3:vscode 中的live server 插件里面就这个代理向李四取钱的代理服务器功能,本文settings.json 中包含了配置信息

6.当然还有一些很多牛叉的解决跨域的方法。若有兴趣的同学可以一起研究探讨。

38、VS code必备前端插件

安装完成后,默认显示英文,我们可以通过安装中文语言包插件来显示中文,操作如下:

打开vscode,点击插件图标(或 + + X),在搜索框中输入“chinese”,安装

使用快捷键“ + + P”打开vscode的命令框,输入 display ,点击“Configure Display Language”,切换语言

如果不喜欢VS code本身的主题色,也可以更换默认主题,在命令框中输入 color theme ,回车,会进入主题列表,通过上下键切换主题,还不满足,没关系,点击安装其他颜色主题,在左侧会出现各式各样的主题插件,选择一个安装即可。

推荐一款图标插件 vscode-icons ,安装成功后,会根据不同的文件类型添加不同的图标样式,看起来会更有趣。

自动闭合 HTML/XML 标签

自动重命名 HTML/XML 标签

解析CSS并自动添加前缀

用于着色匹配括号,让你的代码分层更清晰

运行代码片段或多种语言的代码文件

源代码拼写检查器,提示代码中单词拼写错误

允许查看css,并从HTML文件定位到css文件,文件定义跳转

支持.env文件语法,高亮显示

在VS code中绘制流程图,随时记录你的idea,不要太方便

代码格式校验工具,配合项目中的校验规则,实现保存时格式化代码,开发必备,你值得拥有!

配置文件,在setting.json中添加,可以参考一下

突出显示匹配的标签

当你引入时在左侧会显示图片的缩略图,方便预览

在编辑器中展示引用包的大小,让你更了解你引入的包

帮助你更快速的添加console和删除console,确实方便

在vscode中用于生成文件头部注释和函数注释的插件,经过多版迭代后,插件:支持所有主流语言,功能强大,灵活方便,文档齐全,食用简单!

代码插件,在导入语句中自动完成NPM模块

允许你在默认浏览器或应用程序中打开当前文件。

自动识别文件路径,引用更方便

非常喜欢的一款代码格式化工具,在项目中也可以配置自己的规则

方便svg文件预览

快速搜索编辑器中添加的标签,如todo和fixme,并在资源管理器窗格中的树视图中显示。单击树中的todo将打开文件并将光标放在包含TODO的行上。

突出显示尾随空格并快速删除它们!

你的代码很强大,释放它!

......

大家有什么好用的插件,也可以推荐一下哈~

361知讯网

本文链接:http://pdidw.com/vs/17372.html

发表评论

评论列表

还没有评论,快来说点什么吧~