开发工具 VsCode

VsCode

我选择的开发工具是VsCode，别问为什么，问就是好用。

常用开发工具

1. Visual Studio Code

功能简介：

Visual Studio Code 中文版是微软推出的带 GUI 的代码编辑器，软件功能非常强大，界面简洁明晰、操作方便快捷，设计得很人性化。软件主要改进了文档视图，完善了对 Markdown的支持，新增 PHP 语法高亮。

2. HBuilder

功能简介：

HBuilder 是专为前端打造的开发工具，具有飞一样的编码、最全的语法库和浏览器兼容数据、可以方便的制作手机 APP、最保护眼睛的绿柔设计等特点。支持HTML、CSS、JS、PHP的快速开发。从开放注册以来深受广大前端朋友们的喜爱。

3. Sublime Text

功能简介：

Sublime Text 是一个代码编辑器也是 HTML 和散文先进的文本编辑器。漂亮的用户界面和非凡的功能，例如迷你地图，多选择，Python的插件，代码段，等等。完全可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的Python API，Goto功能，即时项目切换，多选择，多窗口等等。

4. WebStorm

功能简介：

WebStorm 是 jetbrains 公司旗下一款JavaScript开发工具。目前已经被广大中国 JS 开发者誉为“Web 前端开发神器”、“最强大的HTML5编辑器”、“最智能的 JavaScript IDE”等。与 IntelliJ IDEA 同源，继承了 IntelliJ IDEA 强大的 JS 部分的功能。

5. Atom

功能简介：

ATOM，是一个现代的文本编辑器,平易近人,但可删节的核心工具定制做任何事,也可以使用有效不沾一个配置文件。

VsCode 安装（windows）

1. 下载

vscode 支持 Windows、Linux、MAC 三大主流操作系统，点击进入下载安装包

2. VsCode 汉化

打开 VsCode,点击左边的拓展按钮，在弹出的侧边栏搜索框输入chinese，安装Chinese (Simplified) Language Pack for Visual Studio Code。按Ctrl+shift+P快捷键弹出命令行，选择"Configure Display Language"，选择zh-cn。重启一下 vscode 就可以看看效果了。

VsCode 必备插件

1. open in browser

在浏览器中打开，安装后在左侧目录中右键点击会出现 open in browser 选项。

2. Auto Rename Tag

自动重命名配对的 HTML / XML 标签

3. Color-Highlight

在编辑器中高亮显示颜色。

4. Color Picker

代码的颜色选择器。

5. HTML CSS support

css 自动补齐

6. HTML Snippets

支持 HTML5 标签提示

7. JavaScript (ES6) snippets

支持 JavaScript ES6 语法

8. jQuery Code Snippets

jq 代码段提示。

9. Npm Intellisense

在 import 语句中自动完成 npm 模块引入的代码插件。

10. Path Intellisense

文件路径提示。

11. VS Code CSS Comments

css 代码注释。

12. vscode-browser-plugin

在编辑器内预览 HTML，通过开启端口(3000)监听当前打开项目的根目录，在编辑器内预览网站，省去了频繁切换浏览器、编辑器看页面效果，修改代码后自动刷新页面。

13. vscode-icons

文件图标。

14. Vue 2 Snippets

vue 代码提示，高亮。

?>（使用其他框架，直接搜就好，像是 react，angular，就会出现相关的代码提示和语法支持常用插件）

15. Markdown All in One

Markdown插件，可轻松转换为HTML文件和PDF文件

16.ESLint

ESlint：是用来统一JavaScript代码风格的工具，不包含css、html等。

17. Prettify JSON

json 格式化插件

18. Bracket Pair Colorizer

括号颜色高亮

19. One Dark Pro

目前使用人数最多的主题

20. KoroFileHeader

VsCode 自动生成文件头部注释和函数注释

"fileheader.customMade": {
    "Description": "",
    "Author": "jszero",
    "Date": "Do not edit",
    "LastEditTime": "Do not edit",
    "LastEditors": "jszero"
    },

21. GitLens — Git supercharged

GitLens能增强Visual Studio代码中内置的Git功能。它帮助您通过Git blame注解和代码镜头直观地显示代码作者，无缝地导航和探索Git存储库，通过强大的比较命令获得有价值的见解。

22. Setting Sync

Settings Sync可以同步你当前的VSCode配置环境，当你需要在其它的电脑工作时，您不用重头再来一遍。新机器登录一下就搞定了。再也不用折腾环境了。

大致原理：使用GitHub Gist来同步多台计算机上的设置，代码段，主题，文件图标，启动，键绑定，工作区和扩展。

23. REST Client

Rest Client 扩展可以帮助您使用其他第三方工具和 API。如果您需要能够轻松地发出 HTTP 请求，那么它非常有用。

这个扩展允许您轻松地在代码编辑器中直接调用和 API 端点。这样可以节省时间ーー 你可以使用这个选项，而不必在浏览器或 Postman 那里来回地切换请求。

24. NPM

每个现代开发人员都已经知道 NPM 是什么以及为什么它很重要。Node Package Manager 是一个扩展，可以帮助您管理 Package.json 文件。如果有依赖项需要但尚未安装，它会给出警告，还有 NPM 包的版本控制。

我一直致力于解决的大多数错误和错误都来自于使用 NPM 包、函数和特性，由于它与其他包不兼容，这些都无法正常工作。

这个 VSCode 扩展是必须的

25. Browser Preview

在用 VS Code 做前端开发时，你也许会用 Live Server 或者 Debugger for Chrome 插件，来打开 Chrome 浏览器进行预览和调试。你也许会有这样的痛苦，特别是在只有一个屏幕时，你需要在屏幕的两侧进行位置调整，分别打开 VS Code 和 Chrome。不过现在，Browser Preview 插件完全解决了这个问题。

26. Image preview

悬停时显示图像预览。

解决vetur和eslint的冲突

首选项 -> 设置 -> 在setings.json 中编辑

此处奉上本人的vscode设置，可根据根据个人习惯更改

{
    "git.enableSmartCommit": true,
    "workbench.iconTheme": "vscode-icons",
    "window.zoomLevel": -1,
    "editor.fontSize": 16,
    // 制表键空格数
    "editor.tabSize": 2,
    // tab键自动补全代码
    "editor.tabCompletion": "on",
    // eslint 在编辑中展示eslint状态
    "eslint.alwaysShowStatus": true,
    // eslint 保存的时候将代码按eslint格式进行修复
    "eslint.autoFixOnSave": true,
     // vetur插件的格式化程序
    "vetur.format.defaultFormatter.ts": "prettier-tslint",
     // eslint 添加 vue 支持
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    //  #去掉代码结尾的分号 
    "prettier.semi": false,
    //  #使用带引号替代双引号 
    "prettier.singleQuote": true,
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    // vetur 格式化文件的程序
    "vetur.format.defaultFormatter.js": "prettier-eslint",
    "fileheader.customMade": {
    "Description": "",
    "Author": "jszero",
    "Date": "Do not edit",
    "LastEditTime": "Do not edit",
    "LastEditors": "jszero"
    },
}