vscode 安装LeetCode问题解决及对它端口的设置

iconyy
762 阅读2分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

记录下今天在vscode中安装LeetCode遇到的问题及解决办法

vscode 可以打开LeetCode，但是在安装的过程中会遇到一些问题，今天我就把我遇到的问题总结一下并分享(如果安装没问题，可以忽略本文)。

1. 安装LeetCode插件

image.png

2. 登录LeetCode账号(主要出问题地方)
  • 点击左上角网络图标，先将LeetCode切换成中国版。(如果这里就可以登录成功，下面就可以不用再看)

image.png

  • 登录账号密码(有四种方法 1 LeetCode account 2、github账号 3、linkedln 4、LeetCode cookie)

image.png

3. 登录的时候报错

image.png

有几个方面原因

  • node版本过高，推荐使用node12. (在命令行窗口使用node -v查看自己版本)
  • 配置环境 在LeetCode扩展设置里对Endpoint nodepath filepath 做设置。将电脑中node安装的地址填入nodepath中。

可以在设置里面的filepath下面点击 在setting.json中进行配置自己的需求。 编程文件都会保存到本地，默认路径为“$HOME.leetcode"，你可以自行设置路径 点击扩展按钮，选中LeetCode插件，鼠标右键选择扩展设置找到Node Path和Workspace Folder，选择相应路径。

{
    "workbench.editor.untitled.hint": "hidden",
    "editor.linkedEditing": true,
    "editor.formatOnSave": true,
    "liveServer.settings.donotShowInfoMsg": true,
    "liveServer.settings.CustomBrowser": "chrome",
    "workbench.iconTheme": "vscode-icons",
    "explorer.confirmDragAndDrop": false,
    "vsicons.dontShowNewVersionMessage": true,
    "editor.fontFamily": "Consolas",
    "liveServer.settings.port": 5050,           
    "liveServer.settings.root": "",
    "editor.tabSize": 2,
    "leetcode.endpoint": "leetcode-cn",                   //leetcode中国
    "leetcode.nodePath": "D:\\node\\node.exe",            //node安装地址
    "leetcode.filePath": {
        
        "default": {
            "folder": "D:\\LeetCode",                     //LeetCode地址
            "filename": "${id}.${kebab-case-name}.${ext}"
        }
    },
    "leetcode.showLocked": true,
    "leetcode.hint.configWebviewMarkdown": false,
    "leetcode.defaultLanguage": "javascript",             //默认编程语言
}

如果上面的配置完成之后还是登不上去，可以试试github登录，或者cookie方法登录。登录成功右下角会提示successful login。登录成功后的界面是这个样子的：用起来还是挺方便的，可以开始刷题之旅了

image.png

4. vscode端口设置

vscode可以对本地端口进行设置，默认是5050(可编辑)，可以在vscode右下角看到。

image.png

    "liveServer.settings.port": 5050,
    "liveServer.settings.root": "",

liveServer.settings.port是配置端口号。liveServer.settings.root是配置根目录，打开的文件会在根目录下查找。

本地端口号可以在cmd下输入代码netstat -a进行查看。

image.png 在配置中对端口进行设置，就可以实现切换的功能。

    "liveServer.settings.port": 3030,
    "liveServer.settings.root": "/warehouse",

image.png 里面的三个html文件也就是warehouse文件夹下的。

总结

vscode端口及插件的配置，可以在扩展设置中自行配置，所以在下载好插件后最好去setting.json中自行设置一下，避免使用错误，也可以增加自己对于插件的熟悉程度。

avatar
文章
阅读
粉丝