如何在无插件的Eclipse中配置Angular 2/4开发环境？

我太懂你这种找不到合适插件的头疼了——付费插件有时间限制、功能不全的用着闹心，支持旧版本的又满足不了需求。其实不用纠结那些专门的Angular插件，用Eclipse基础Web套件搭配Angular CLI就能搭建稳定好用的开发环境，下面是具体步骤：

1. 先搭好基础依赖 #

• 安装Node.js（选LTS版本就行，Angular 2/4要求Node 6.x及以上，别装太新的版本避免兼容问题），安装完在终端验证是否成功：

  node -v
  npm -v
  

• 全局安装适配Angular 2/4的Angular CLI版本（比如@angular/cli@1.7.4，这个版本完美匹配Angular 4.x）：

  npm install -g @angular/cli@1.7.4
  

2. 配置Eclipse的开发环境 #

• 直接下载Eclipse IDE for Web Developers版本，自带HTML/CSS/JS基础编辑器，不用额外装一堆基础插件。
• 装个终端插件：在Eclipse里打开「Help > Eclipse Marketplace」，搜索「Terminal」，选一个口碑好的终端插件（比如Eclipse Terminal）安装，这样就能在IDE里直接敲命令，不用来回切窗口。
• 补全TypeScript支持：同样在Marketplace搜索「TypeScript」，安装官方的TypeScript编辑器插件，这样Angular代码的语法高亮、错误提示、自动补全都有了。

3. 创建并导入Angular项目 #

• 打开Eclipse里的终端，用CLI创建项目：

  ng new my-angular4-project --style css --routing false
  

  （--style css指定用CSS写样式，--routing false关闭路由，你可以根据自己的需求调整参数）
• 导入项目到Eclipse：选「File > Import > General > Existing Projects into Workspace」，找到刚才创建的项目文件夹导入就可以了。

4. 日常开发的操作流程 #

• 启动开发服务器：在终端进入项目根目录，执行：

  ng serve
  

  然后浏览器打开http://localhost:4200就能看到项目运行效果，代码修改后还能自动刷新。
• 快速生成代码：用CLI命令生成组件、服务这类常用文件，比如：

  ng generate component my-new-component
  

  生成的文件会自动被Eclipse识别，TypeScript插件也会立刻提供代码支持。

这种方案完全免费，功能也足够完整，不用受那些商业插件的限制，适配Angular 2/4完全没问题。

内容的提问来源于stack exchange，提问作者Sampada