前端小白必备的基本开发工具

一. 下载安装Visual Studio Code

1. 配置前端开发环境：界面左下角“设置”图标，选择settings，输入settings.json，找到settings.json并进入

   {
       "workbench.colorTheme": "Material Theme High Contrast",
       //"sublimeTextKeymap.promptV3Features": true,
       // 编辑器
       "editor.multiCursorModifier": "ctrlCmd",
       "editor.snippetSuggestions": "top",
       "editor.renderWhitespace": "none",
       "editor.formatOnPaste": true,
       "editor.wordWrap": "on",
       "editor.fontSize": 18,
       "editor.tabSize": 2,
       // 文件资源管理
       "explorer.confirmDragAndDrop": false,
       "explorer.confirmDelete": false,
       // 终端
       "terminal.integrated.cursorBlinking": true,
       "terminal.integrated.cursorStyle": "line",
       "emmet.includeLanguages": {
           "vue-html": "html"
       },
       // 文件
       "files.eol": "\n",
       "files.associations": {
           "*.vue": "vue"
       },
       "files.autoSave": "afterDelay",
       // 窗口
       "window.zoomLevel": 1,
       // 使用 vscode-typescript 来整理代码
       "vetur.format.defaultFormatter.js": "vscode-typescript",
       "vetur.format.defaultFormatter.ts": "vscode-typescript",
       "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
       // 可能是让 CPU 炸了的罪魁祸首
       "search.followSymlinks": false,
       "html.format.extraLiners": "",
       "workbench.sideBar.location": "left",
       "workbench.iconTheme": "material-icon-theme",
       "editor.minimap.enabled": true,
       "breadcrumbs.enabled": true,
       "editor.renderControlCharacters": false,
       "workbench.statusBar.visible": true,
       "window.menuBarVisibility": "default",
       "workbench.activityBar.visible": true
   }

    

2. 需要安装的插件：插件网址

• Auto Close Tag   
• Auto Rename Tag    修改html标签，自动帮你完成尾部闭合标签的同步修改
• Bootstrap 3 Snippets   常用bootstrap的可以下载
• CSS Peek   追踪至样式表中 CSS 类和 ids 定义的地方
• Debug for Chrome   让vscode映射chrome的debug功能，静态页面都可以用vscode来打断点调试
• Document This    Js的注释模板
• EditorConfig for VS Code
• EsLint
• HTML CSS Support    让HTML标签上写class智能提示当前项目所支持的样式
• HTML Snippets    H5代码片段以及提示
• JavaScript(ES6) code snippets
• jQuery code Snippets   jquery提示工具
• language-stylus  
• Markdown All in One
• Material Icon Theme   图标主题
• Material Theme   主题风格
• Minify  用于压缩合并 JavaScript 和 CSS 文件的应用程序
• npm Intellisense    require 时的包提示
• open in browser   由于 VSCode 没有提供直接在浏览器中打开文件的内置界面，所以此插件在快捷菜单中添加了在默认浏览器查看文件选项，以及在客户端（Firefox，Chrome，IE）中打开命令面板选项
• path Intellisense    自动路径补全、默认不带这个功能
• prettier-code formatter  
• SVG Viewer   此插件在 Visual Studio 代码中添加了许多实用的 SVG 程序，你无需离开编辑器，便可以打开 SVG 文件并查看它们
• Typing Installer  安装vscode 的代码提示依赖库，基于typtings
• Vetur
• vscode-icons   让vscode资源目录加上图标
• Vue 2 Snippets

二. 下载安装Node.js，并验证是否安装成功

三. 安装typings，并验证是否安装成功

npm install -g typings

  

• 安装对应插件的提示工具

typings install dt~node --global --save
typings install dt~lodash --save
typings install dt~express --save

  

  

• 基本用法

# 安装Typings的命令行代码. 
npm install typings --global

# 搜索对应模块的typings定义. 
typings search tape

# 根据名称寻找一个可获得的typings定义. 
typings search --name react

# 如果你用一个独立包的模块: 
# 或者并不是安装全局模块
# 比如并不是在命令行通过输入npm install -g typings这种方式安装的. 
typings install debug --save

# 如果是通过script标记
# 或者是子环境的一部分
# 或者全局typings命令不可用的时候： 
typings install dt~mocha --global --save

# 从其他版本处安装typings定义(比如env或者npm). 
typings install env~atom --global --save
typings install npm~bluebird --save

# 使用该文件`typings/index.d.ts` (在`tsconfig.json`文件使用或者用 `///` 定义). 
cat typings/index.d.ts

  

• 启用代码提示功能

       通过两种方式启用：

       1. 第一种是在需要进行只能提示的文件最上行增加提示信息文件所在目录，格式如下:

/// 

        

        注意：文中我的path路径就是当前工作目录的相对路径（也可以直接写绝对路径）

       2. 第二种是在项目所在的目录中增加一个名为jsconfig.json的空文件