zoukankan      html  css  js  c++  java
  • 配置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界面如图所示:

      二、下载和安装Node.js 

      在官网下载Node.js:Node.js(在生产环境,建议使用LTS,比较稳定,bug相对比较少。)如果下载成功,可以的win的cmd命令下用node -v查看自己的node版本,例如我这次下的是12.13.1版本。注意,当我们安装好Node时,软件包管理工具npm也安装了。

        (win+R键,输入cmd)       (node -v)

    三、安装全局的babel

      使用npm命令安装全局的babel。输入命令:npm install babel-cli babel-eslint -g

          

     四、使用npm init命令创建工程

      如果有创建的工程了,这一步可以跳过。

      我们可以在VS的终端下,使用npm init命令创建工程。在控制台下,创建工程目录,如:D:front endworkspace,然后进入该目录,使用命令:npm init(或者是 npm init -y),-y代表全部默认同意,就不用一次次按回车了。此时在该目录的根目录下创建了生成package.json文件(依赖文件),可以根据自己的需要进行修改 。

      此外,为了方便管理,通常我们需要创建两个目录:src目录(源码目录)和dist目录(利用Babel编译成的ES5代码的文件都在这里,HTML页面需要引入的是这里的js文件而不是src中的),所以有两个目录:D:front endworkspacedist和D:front endworkspacesrc

      (点击terminal,选择new terminal)

        (npm init/npm init -y)

      (package.json文件,可以修改配置值)

      五、本地安装babel-preset-es2015 和 babel-cli(编译插件)

      在终端执行:npm install --save-dev babel-preset-es2015 babel-cli 

      (注意此时的之前的package.json文件会自动多了devDependencies选项。其实还创建了package-lock.json文件和node_modules文件夹) 

      

           

      六、新建.babelrc及简单检测(ES6转化为ES5的语法)

      在根目录下新建一个.babelrc文件,并写入代码:

        { "presets":[ "es2015" ], "plugins":[] } 

      这样就创建了.babelrc文件

      

       现在可以在终端输入的转换命令了,这次ES6成功转化为ES5的语法。

      简单检测一下:

      1、首先在项目文件根目录下新建一个index.html文件(创建.HTML文件,在代码输入! 和tab键可以快速创建HTML5模板,当然在VS中我们也可以定制自己的模板)。注意,在引入js文件时,引入的是dist目录下的文件(就是我们想要把src下的ES6文件转换为ES5语法文件)。

    <!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>
        <!-- 引入自己的JS代码 -->
        <script src="./dist/index.js"></script>
    </head>
    <body>
        
    </body>
    </html>

      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语法)

      

      (转换为了ES5语法,并保存在dist目录下)

      (运行时,也输出正确结果)(通过VS界面的DEBUG选项中,选择Run with Node.js)

    七、VS code的常用插件

      1、基本插件扩展用法。我们可以在主界面的左边工具栏中选中Extensions(最后一个),然后再搜索框内搜索我们需要的扩展插件。下面推荐几个常用的插件和用法。

      

       2、ESLint。JS语法代码检测。

      3、open in browser。可以通过邮件把我们写的HTML代码展示到我们的浏览器中。

      (可以选择默认的浏览器或者是下面自己选择的浏览器)

       补充:我们可以更换我们自己的VS默认浏览器,VS中,file-->preferences-->settings,然后再弹出来的界面搜索框输入插件的默认文件(open-in-browser.default)。然后再下面的Workspace中输入浏览器名:Chrome(这里我用谷歌浏览器)。然后保存。之后在使用Open in Default Browser就可以在谷歌展示我们的HTMl代码了。

        

        4、livereload。平时我们在代码区中修改,然后保存,然后再打开浏览器刷新,才能显示新的变化。livereload插件能够使得我们在代码区每保存一次,网页显示的东西自动更新一次。(类似webpack-dev-server)

           (选择livereload)

      首先,在VS安装好livereload之后,同时按ctrl+shift+p,输入框内输入livereload,就会显示LiveReload:Enable/disable server,点一下就会开启这个服务。

      

         然后,在谷歌浏览器网上应用商店搜索livereload,并安装,然后在浏览器扩展程序中启用并允许访问文件网址。   

        (启用)

      (允许)

       这样,当我们在浏览器打开了的自己代码网页,点击浏览器(右上角)的livereload按钮,从空心到实心。之后,我们每次在VS修改代码,每次保存之后,就可以直接在浏览器看到我们的最新一次的代码修改的展示结果了。

       5、VS Code JavaScript(ES6) snippets。它是如今最流行的代码片段插件,可以辅助我们快速编写ES6/ES7代码。例如:输入imp,回车之后,就变成import moduleName from 'module'。

       

      6、Beautify。在写代码或者是粘贴代码时,缩进的格式变乱,需要一行一行的调整十分麻烦。Beautify是一个代码格式化工具,能帮助我们调整。

      首先下载Beautify

         

      在工作目录下建立.jsbeautifyrc文件。(这个排版格式,我们也是可以定义自己的模板)

    {
       "brace_style": "none,preserve-inline",
       "indent_size": 2,
       "indent_char": " ",
       "jslint_happy": true,
       "unformatted": [""],
       "css": {
         "indent_size": 2
       }
     }

      启用保存文件就自动排版。在VSCode的配置文件里添加 "editor.formatOnSave":true (setting.json文件里面)  

        

       这样,只要我们在自己工作目录下,保存代码,其自动就会按照格式调整了。

     备注:上述插件是我本人(菜鸟一个)目前使用到的,日后有使用到好的插件,我再分享加入进去。

  • 相关阅读:
    使用json序列化类型为“ajax学习.DataSetComment+T_CommentDataTable”的对象时检测到循环引用。
    CKEditor在asp.net上使用的图例详解
    去掉 win7 “测试模式 windows7 内部版本7601” 字样
    Java中非静态方法是否共用同一块内存?
    最长公共子串(LCS)
    [链表]复杂链表的复制
    最长公共子序列
    最大子序列和问题
    [ 队列]从上往下遍历二元树
    [链表]在O(1)时间删除链表结点
  • 原文地址:https://www.cnblogs.com/xinkuiwu/p/12052495.html
Copyright © 2011-2022 走看看