VsCode编辑器

1、vscode代码保存时自动格式化成 ESLint风格（支持VUE）： http://www.ptbird.cn/vscode-autosave-eslint-support-vue.html

　另，vscode中非webpack等一些构建工具项目，也可以使用eslint风格。但是需要额外安装eslint包，生成.eslintrc.*文件： https://segmentfault.com/a/1190000009077086（亲测有效）

npm install eslint --save-dev

项目目录下创建一个 .eslintrc.* 的配置文件或使用命令行（./node_modules/.bin/eslint --init，推荐这种方法）生成这个文件。具体规则可以自己根据需要定制的 https://www.cnblogs.com/yesu/p/7852527.html。

module.exports = {
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "sourceType": "module"
    },
    "rules": {
        "indent": [
            "error",
            4
        ],
        "linebreak-style": [
            "error",
            "windows"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "never"
        ]
    }
};

View Code

　重点：eslint包不依赖于webpack，依赖于node。node对项目结构没有侵入性，只是在根目录下生成一个 node_modules文件夹和 package.json文件。eslint功能再添加一个配置文件。

　注意：eslint可以忽视指定某个或某类文件，创建 .eslintignore 文件进行配置。如：

/build/
/config/
/dist/
/static/js/*.js
/*.js

2、VSCODE编辑器常用插件推荐： https://blog.csdn.net/Che_rish/article/details/78893019

3、特殊功能快捷方式：

　　a、 js 的注释模板 （注意：新版的vscode已经原生支持,在function上一行输入 /** tab）

4、vscode 调试node.js ：https://www.cnblogs.com/klsw/p/7765427.html

我的常用插件：

　　1、ESLint 配置： http://www.ptbird.cn/vscode-autosave-eslint-support-vue.html

　　2、Auto Close Tag

　　3、Auto Rename Tag

　　4、编辑器中文插件

　　5、View In Browser 文件协议打开

　　6、Live Server 本地服务器打开（这个服务器具有文件修改自动刷新功能的。）

　　7、Path Intellisense 自动路劲补全

　　8、Bracket Pair Colorizer 让括号拥有独立的颜色，易于区分。可以配合任意主题使用。

　　9、Vetur vue文件的语法高亮

　　10、Todo Tree http://www.cnblogs.com/qiezuimh/p/9549545.html 显示代码中 TODO，FIXME 的注释。（个人觉得可以只用TODO来标记，因为两个都是需要去改动代码的，所以都是未完成状态）

　 11、Git Graph 版本树显示插件，比小乌龟git的好用。

5、vscode编辑器，默认可以使用命令行，打开编辑器：https://www.jianshu.com/p/274ca1b20dc1

code  base.conf   // 文件路径可以使用 tab 键自动补全的

6、vscode快捷方式：https://www.cnblogs.com/schut/p/10461840.html

1、F1 或 Ctrl+Shift+P（俗称万能键）  ：打开命令面板。
2、在 Ctrl+P 模式下输入 “?” 会弹出下拉菜：
3、移动到行首:   Home；移动到行尾:   End
4、移动到文件结尾:   Ctrl+End；移动到文件开头:   Ctrl+Home
5、扩展/缩小选取范围： Shift+Alt+→ 和 Shift+Alt+←
6、返回/前进：Alt + ←/→

注意：vscode 中编辑器设置中有用户（就是全局设置）和工作区（只是对当前项目进行的设置，设置文件在.vscode文件夹内）两种。

vsCode调试 nodejs 的程序：

一、简单的nodejs程序调试很好调试，这里略过。

二、通过npm 命令启动的程序，调试代码。

　　1、vue-cli2 构建的项目：https://blog.csdn.net/My__God/article/details/82015385（亲测有效）

　　　　配置 launch.json 即可：

"configurations": [
    {
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "name": "启动程序",
      "program": "${workspaceFolder}/node_modules/webpack-dev-server/bin/webpack-dev-server.js",
      "args": [
        "--inline",
        "--progress",
        "--config",
        "build/webpack.dev.conf.js"
      ]
    }
  ]

　　个人理解：npm run 命令会到项目或全局上找cmd文件，执行基本；cmd 脚本在去调用 node.exe 去执行相应的js文件。所以 npm命令运行的node程序，都是要通过 node.exe 去执行 js 文件的。

　　　　　　　那么根据 cmd 中的配置，找到node执行的 js文件，通过 debug模式启动这个js程序，就可以进入程序的 debug模式了。

　　2、