一些前端配置分享

一、eslint代码风格检查配置

1.1 自动安装配置

安装及使用方法

1. 安装：npm i -D eslint @babel/eslint-parser @babel/eslint-plugin @ecomfe/eslint-config

2. 使用：在当前目录下新建.eslintrc.json文件，写入以下内容：

module.exports = {
    extends: [
        '@ecomfe/eslint-config',
    ],
};

注意：

* 参考网址：https://github.com/ecomfe/eslint-config
* 如果报错可能和babel版本有关，可参考：https://blog.csdn.net/qq_41499782/article/details/116571243 

1.2 手动配置

将.eslintrc.json文件放到工程目录文件下

命令行执行npm i eslint

VSCode再安装一个eslint插件即可

二、chrome调试nodejs代码

执行 node --inspect app.js

• app.js是根据自己执行的文件来确定的

浏览器输入chrome://inspect/#devices，进行打点调试

三、VSCode调试node代码

参考文档或视频：

VSCode调试Nodejs_"vscode debug nodejs launch.json \"console\": \"ex_lihefei_coder的博客-CSDN博客

如何调试Node_哔哩哔哩_bilibili

方法一（使用JavaScript Debug Terminal直接调试）

1. 进入终端，选择JavaScript Debug Terminal模式

2. 进入到启动目录，node main.js 启动程序

3. 在js文件中打好断点

4. 利用postman本地发起request请求，在vscode界面进行debug调试，enjoy！

方法二（配置lanuch.json文件进行调试）

1. 创建lanuch.json文件

 2. 在工程目录下配置lanuch.json文件

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node", // 调试器的类型
            "request": "launch", // 调试的模式 lanuch:启动程序并调试 attach:将程序附加到一个正在运行的进程中进行调试
            "name": "start", // debug调试配置的名字
            "env": {
                "PORT": "8084" // debug调试端口
            },
            "program": "${workspaceFolder}/baidu/vrender/core/build/app.js" // debug调试文件的启动路径
        }
    ]
}

3. 在js文件打好断点

4. 点击左上角绿色三角按钮（debug调试配置自己写的是start，所以这里选择start启动），就可以在调试控制台看到debug状态了

5. 利用postman发起request请求（注意自己配置的请求端口），就可以快乐debug