【笔记】再学JavaScript ES(6-10)全版本语法——课程介绍与环境搭建

---

一、课程导学

一定要在解决问题的过程中养成使用新知识的思维习惯

二、环境准备

1.为什么需要单独准备环境？

2.Node 安装

【笔记】Node.js概述和开发环境搭建

3.创建项目

初始化项目

npx es10-cli create projectName

或是两步分开执行：

cnpm i es10-cli -g
es10-cli create projectName

如果安装失败，可以手动下载模板（安装失败的原因应该是create命令包含了clone和npm两部分，clone成功但是npm失败）：

git clone https://github.com/cucygh/es-cli.git
cd es-cli
cnpm i

接下来手动下载安装的项目名称可以自行修改：

• 项目目录
• package.json

启动项目

cd projectName
npm start

访问项目

启动成功默认通过http://localhost:8080访问，界面显示如下：

4.编辑器配置

Atom

插件	作用
atom-beautify	代码格式化
autocomplete-paths	路径自动补全
emmet	快速生成html代码
file-type-icons	文件图标
linter	代码检查
linter-eslint	eslint检查

VSCode

插件	作用
Beautify	代码格式化
ESLint	eslint检查

settings.json

{
  "eslint.autoFixOnSave": true,
  "prettier.eslintIntegration": true,
  "prettier.semi": false,
  "prettier.singleQuote": true,
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
    }
  },
  "eslint.validate": [
    "javascript",
    "html"
  ],
  "eslint.options": {
    "plugins": [
      "html"
    ]
  },
  "window.zoomLevel": 1,
  "editor.formatOnSave": true
}