配置ES6的JavaScript运行环境-Visual Studio Code

富海老翁 發表於 2019-12-17 08:54:00

配置ES6的JavaScript运行环境-Visual Studio Code

内容：在Visual Studio Code下，配置ES6的JS运行开发环境（通过babel把ES6转码为ES5语法的代码）和VS相关插件。（之前都用sublimeText3，好像现在主流都是用VS的比较多）
前排提示：如果只是学习，单纯调试使用ES6的JS代码，安装Visual Studio Code和Node.js（正文的第一步和第二步），然后就可以在Debug下执行Run with Node.js就可以在debug控制台观看ES6的JS代码执行的结果了。如果查看HTML代码的效果，可以只看正文的第七步的第3，4点。不过还是建议观看全文，从开发角度，构建一个工程。
正文：
一、下载和安装Visual Studio Code
　　在官网下载Visual Studio Code：Visual Studio Code
　　安装完的VS界面如图所示：
<img src="https://img2018.cnblogs.com/i-beta/1803687/201912/1803687-20191217100919874-1865037743.png" alt="" width="601" height="188">
  二、下载和安装Node.js 
　　在官网下载Node.js：Node.js（在生产环境，建议使用LTS，比较稳定，bug相对比较少。）如果下载成功，可以的win的cmd命令下用node -v查看自己的node版本，例如我这次下的是12.13.1版本。注意，当我们安装好Node时，软件包管理工具npm也安装了。
　　<img src="https://img2018.cnblogs.com/i-beta/1803687/201912/1803687-20191217100204012-1083348072.png" alt="" width="256" height="147">  （win+R键，输入cmd）       <img src="https://img2018.cnblogs.com/i-beta/1803687/201912/1803687-20191217100440228-2102515367.png" alt="">(node -v)
三、安装全局的babel
　　使用npm命令安装全局的babel。输入命令：npm install babel-cli babel-eslint -g
      <img src="https://img2018.cnblogs.com/i-beta/1803687/201912/1803687-20191217100540959-1316796870.png" alt="">
 四、使用npm init命令创建工程
　　如果有创建的工程了，这一步可以跳过。
　　我们可以在VS的终端下，使用npm init命令创建工程。在控制台下，创建工程目录，如:D:\front end\workspace，然后进入该目录，使用命令：npm init（或者是 npm init -y），-y代表全部默认同意，就不用一次次按回车了。此时在该目录的根目录下创建了生成package.json文件（依赖文件），可以根据自己的需要进行修改。
　　此外，为了方便管理，通常我们需要创建两个目录：src目录（源码目录）和dist目录（利用Babel编译成的ES5代码的文件都在这里，HTML页面需要引入的是这里的js文件而不是src中的），所以有两个目录：D:\front end\workspace\dist和D:\front end\workspace\src
　　<img src="https://img2018.cnblogs.com/i-beta/1803687/201912/1803687-20191217100801557-205915367.png" alt="">（点击terminal，选择new terminal）
   　<img src="https://img2018.cnblogs.com/i-beta/1803687/201912/1803687-20191217101017073-344826067.png" alt="">（npm init/npm init -y）
　　<img src="https://img2018.cnblogs.com/i-beta/1803687/201912/1803687-20191217101624560-1608779295.png" alt="">（package.json文件，可以修改配置值）
  五、本地安装babel-preset-es2015 和 babel-cli（编译插件）
　　在终端执行：npm install --save-dev babel-preset-es2015 babel-cli 
　　（注意此时的之前的package.json文件会自动多了devDependencies选项。其实还创建了package-lock.json文件和node_modules文件夹） 
　　<img src="https://img2018.cnblogs.com/i-beta/1803687/201912/1803687-20191217102809284-885227640.png" alt="">
       <img src="https://img2018.cnblogs.com/i-beta/1803687/201912/1803687-20191217102959678-1178473458.png" alt="">
  六、新建.babelrc及简单检测（ES6转化为ES5的语法）
　　在根目录下新建一个.babelrc文件，并写入代码：
　　  { "presets":[ "es2015" ], "plugins":[] } 
　　这样就创建了.babelrc文件
　　<img src="https://img2018.cnblogs.com/i-beta/1803687/201912/1803687-20191217103557568-1926543486.png" alt="">
 　　现在可以在终端输入的转换命令了，这次ES6成功转化为ES5的语法。
　　简单检测一下：
　　1、首先在项目文件根目录下新建一个index.html文件（创建.HTML文件，在代码输入! 和tab键可以快速创建HTML5模板，当然在VS中我们也可以定制自己的模板）。注意，在引入js文件时，引入的是dist目录下的文件（就是我们想要把src下的ES6文件转换为ES5语法文件）。
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>

<script src="./dist/index.js"></script>
</head>
<body>

</body>
</html></pre>
</div>
　　2、在src目录下，新建index.js文件。通常是ES6语法文件，我们简单用let（ES6特有）举例。（我们的目标就是将其转换为在ES5语法的文件并放入到dist目录下）
 let i = 10; console.log(i); 
　　3、在终端使用命令：babel src/index.js -o dist/index.js（将ES6语法转换为ES5语法）
　　<img src="https://img2018.cnblogs.com/i-beta/1803687/201912/1803687-20191217105327991-591678386.png" alt="">
　　<img src="https://img2018.cnblogs.com/i-beta/1803687/201912/1803687-20191217105419850-1102892532.png" alt="">（转换为了ES5语法，并保存在dist目录下）
　　<img src="https://img2018.cnblogs.com/i-beta/1803687/201912/1803687-20191217105542414-1409053093.png" alt="">（运行时，也输出正确结果）（通过VS界面的DEBUG选项中，选择Run with Node.js）
七、VS code的常用插件
　　1、基本插件扩展用法。我们可以在主界面的左边工具栏中选中Extensions（最后一个），然后再搜索框内搜索我们需要的扩展插件。下面推荐几个常用的插件和用法。
　　<img src="https://img2018.cnblogs.com/i-beta/1803687/201912/1803687-20191217145251489-126972363.png" alt="">
 　　2、ESLint。JS语法代码检测。
　　3、open in browser。可以通过邮件把我们写的HTML代码展示到我们的浏览器中。
　　<img src="https://img2018.cnblogs.com/i-beta/1803687/201912/1803687-20191217145836652-1994429289.png" alt="">（可以选择默认的浏览器或者是下面自己选择的浏览器）
 　　补充：我们可以更换我们自己的VS默认浏览器，VS中，file-->preferences-->settings，然后再弹出来的界面搜索框输入插件的默认文件（open-in-browser.default）。然后再下面的Workspace中输入浏览器名：Chrome（这里我用谷歌浏览器）。然后保存。之后在使用Open in Default Browser就可以在谷歌展示我们的HTMl代码了。
　　　　<img src="https://img2018.cnblogs.com/i-beta/1803687/201912/1803687-20191217150033187-820253161.png" alt="">
  　　4、livereload。平时我们在代码区中修改，然后保存，然后再打开浏览器刷新，才能显示新的变化。livereload插件能够使得我们在代码区每保存一次，网页显示的东西自动更新一次。（类似webpack-dev-server）
       <img src="https://img2018.cnblogs.com/i-beta/1803687/201912/1803687-20191217151303435-765932833.png" alt="">（选择livereload）
　　首先，在VS安装好livereload之后，同时按ctrl+shift+p,输入框内输入livereload，就会显示LiveReload:Enable/disable server，点一下就会开启这个服务。
　　<img src="https://img2018.cnblogs.com/i-beta/1803687/201912/1803687-20191217151422597-1456224826.png" alt="">
 　   然后，在谷歌浏览器网上应用商店搜索livereload，并安装，然后在浏览器扩展程序中启用并允许访问文件网址。 　　<img src="https://img2018.cnblogs.com/i-beta/1803687/201912/1803687-20191217151541755-2051284121.png" alt="">
　　　　<img src="https://img2018.cnblogs.com/i-beta/1803687/201912/1803687-20191217151625174-578714816.png" alt="">（启用）
　　<img src="https://img2018.cnblogs.com/i-beta/1803687/201912/1803687-20191217151919980-393767128.png" alt="">（允许）
 　　这样，当我们在浏览器打开了的自己代码网页，点击浏览器（右上角）的livereload按钮，从空心<img src="https://img2018.cnblogs.com/i-beta/1803687/201912/1803687-20191217152131222-1849310826.png" alt="">到实心<img src="https://img2018.cnblogs.com/i-beta/1803687/201912/1803687-20191217152145000-1493748892.png" alt="">。之后，我们每次在VS修改代码，每次保存之后，就可以直接在浏览器看到我们的最新一次的代码修改的展示结果了。
 　　5、VS Code JavaScript(ES6) snippets。它是如今最流行的代码片段插件，可以辅助我们快速编写ES6/ES7代码。例如：输入imp，回车之后，就变成import moduleName from 'module'。
　　 <img src="https://img2018.cnblogs.com/i-beta/1803687/201912/1803687-20191217153851841-750101971.png" alt="">
　　6、Beautify。在写代码或者是粘贴代码时，缩进的格式变乱，需要一行一行的调整十分麻烦。Beautify是一个代码格式化工具，能帮助我们调整。
　　首先下载Beautify
     <img src="https://img2018.cnblogs.com/i-beta/1803687/201912/1803687-20191217161955682-1900202428.png" alt="">
　　在工作目录下建立.jsbeautifyrc文件。（这个排版格式，我们也是可以定义自己的模板）
<div class="cnblogs_code">
<pre>{
"brace_style": "none,preserve-inline",
"indent_size": 2,
"indent_char": " ",
"jslint_happy": true,
"unformatted": [""],
"css": {
"indent_size": 2
}
}</pre>
</div>
　　启用保存文件就自动排版。在VSCode的配置文件里添加 "editor.formatOnSave":true （setting.json文件里面）  
    <img src="https://img2018.cnblogs.com/i-beta/1803687/201912/1803687-20191217162401160-1325622885.png" alt="">
 　　这样，只要我们在自己工作目录下，保存代码，其自动就会按照格式调整了。
 
 备注：上述插件是我本人（菜鸟一个）目前使用到的，日后有使用到好的插件，我再分享加入进去。

</div>
<div id="MySignature" role="contentinfo">
Talk is cheap, code the code. 
来源：https://www.cnblogs.com/xinkuiwu/p/12052495.html

頁: [1]

琼殿技术论坛's Archiver

配置ES6的JavaScript运行环境-Visual Studio Code