devbox
程序自动化专家
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vscode配置vue3+python开发环境

作者：程序自动化专家 | 2024-01-31 08:35:47

赞

踩

vue3+python

vscode配置vue3+python开发环境

说明

推荐使用vscodium,没有用户追踪,下载VSCodium-win32-x64.zip，设置采用微软官方扩展源就是vscode了，设置方法如下
修改安装根目录/resources/app/product.json文件中的extensionsGallery键对应的值如下：

"extensionsGallery": {
    "serviceUrl": "https://marketplace.visualstudio.com/_apis/public/gallery",
    "itemUrl": "https://marketplace.visualstudio.com/items"
}

  • 1
  • 2
  • 3
  • 4

重启vscodium。扩展里就可以搜索安装微软官方扩展源里的扩展。

安装

普通安装

windows

下载：https://code.visualstudio.com/Download
选择【system Installer 64bit】版本，安装总是下一步就好。

迁移到离线环境

如果是便携版直接复制粘贴即可，如果是安装版按以下方法迁移：

  1. 在外网的台式机上安装好VSCode，并安装好需要用到的插件。
  2. 拷贝C:\Users\用户名称\AppData\Local\Programs目录下的Microsoft VS Code目录
  3. 拷贝C:\Users\用户名目录下的.vscode文件夹
  4. 将2文件夹复制到内网电脑对应的位置上，就可以使用了。

便携版安装（推荐）

在便携版的code.exe同级目录创建data目录，并在data目录内创建tmp目录即可，以后将该便携版文件夹拷贝就可以了
注意：如果装过vscode要彻底删除，方法是：

  • win + R 打开运行窗口，在输入框中输入%appdata%，删除code文件夹
  • win + R 打开运行窗口，在输入框中输入%userprofile%，删除 .vscode 文件夹

常规设置

显示tab符和空字符

打开setting,在搜索框中输入renderControlCharacters,选中勾选框,即可显示tab. 在搜索框中输入renderWhitespace,选择all,即可显示空格.

设置大小写转换的快捷键

  1. 文件>首选项>键盘快捷方式
  2. 输入 “转换为大写”, 会出现搜索结果【转换为大写】,鼠标悬停在该结果上, 点击前面的”加号” 或 双击, 会弹出输入自定义快捷键的弹窗。
  3. 在键盘上面按下Ctrl、Shift和u, 然后按Enter键, 即可成功绑定转换为大写快捷键。
    4.同理，搜索”转换为小写”, 鼠标悬停在结果上, 点击前面的”加号” 或 双击, 弹出设置快捷键的弹窗，在键盘上面按下Ctrl、Shift和l, 然后按Enter键, 即可成功绑定转换为小写快捷键。最终设置的自定义的大小写转换快捷键如下:
    转换为大写: Ctrl+Shift+u
    转换为小写: Ctrl+Shift+l

常用插件

基础插件

1. 中文语言包 ，Chinese (Simplified)

2. 主题皮肤 material theme
搜索material theme安装—>点【文件】—>【首选项】—>【主题颜色】—>【material theme】

3.文件图标 Material Icon Theme

4. 方便看到代码的缩进 indent-rainbow

5. 主题（推荐） One Dark Pro

6. 调试插件 Code Runner
代码一键运行，支持超过40种语言

6.1.代码一键运行 安装好Code Runner之后，打开你所要运行的文件，有多种方式来快捷地运行你的代码：

  • 键盘快捷键 Ctrl+Alt+N
  • 快捷键 F1 调出 命令面板, 然后输入 Run Code
  • 在编辑区，右键选择 Run Code
  • 在左侧的文件管理器，右键选择 Run Code
  • 右上角的运行小三角按钮

6.2.停止代码运行
如果要停止代码运行，也有如下几种方式：

  • 键盘快捷键 Ctrl+Alt+M
  • 快捷键 F1 调出 命令面板, 然后输入 Stop Code Run
  • 在Output Channel，右键选择 Stop Code Run

6.3.运行指定代码

  • 选中要运行的代码，右键Run Code

6.4.乱码问题

  • 打开设置——>扩展——>Run Code configuration——>找到Run In Terminal打钩
  • 打开设置，setting.json中设置加入
    "terminal.integrated.shellArgs.windows": ["/K chcp 65001 >nul"],

    • 1

7. 万能代码补全 Tabnine AI Autocom

8. 项目管理 Project Manager
（1）command+ shift + p打开配置文件， 输入 Project Manager: Edit Projects

[
    {
        "name": "nuxtest",
        "rootPath": "/Users/tianer/WebstormProjects/sales-crm-web",//添加你的本地项目
        "paths": [],
        "group": ""
    },
    {
        "name": "vuetest",
        "rootPath": "/Users/tianer/WebstormProjects/sales-crm-web",//添加你的本地项目
        "paths": [],
        "group": ""
    }
]

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

9. 翻译 翻译(英汉词典)

前端插件

vue

1. vue3支持 Vetur
语法高亮、智能感知、Emmet等 包含格式化功能， Alt+Shift+F （格式化全文），Ctrl+K Ctrl+F（格式化选中代码，两个Ctrl需要同时按着）

2.代码规范 EsLint
检查js、html、css代码，确保它们符合规范，并且代码风格保持一致性，强制性的规则，你少写一个空格或者多敲一个回车都会被严格的指出来，在vue-cli生成的项目帮我们把配置都生成好了，在使用vue-cli生成webpack项目时会询问是否启用eslint并且使用哪套规范，选择Standard规范就行:

3. 格式化代码 Prettier - Code formatter
在设置中把在保存时格式化文件勾上，就可以ctrl+s保存后格式化文件

"prettier.printWidth": 120,,// 最大换行长度
"prettier.tabWidth": 2, // 保存后缩进单位
"[html][css][less][scss][javascript][typescript][json][jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",//设置prettier为默认格式化程序
    "editor.tabSize": 2// 编辑时缩进单位
  },

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

eslint与prettier配置

{
    "eslint.alwaysShowStatus": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "eslint.workingDirectories": [
        {"mode": "auto"}
    ],
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact",
        "vue"
    ]
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

4. 自动闭合HTML/XML标签 Auto Close Tag

5. ES6语法智能提示 JavaScript(ES6) code snippets
ES6语法智能提示以及快速输入，除js外还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间

6.让 html 标签上写class HTML CSS Support
智能提示当前项目所支持的样式

7. 生成vue的模板代码 vue VSCode Snippets

8. 代码提示插件 vue-helper

9. Element Plus的代码提示插件 Element Plus Plus

10. 浏览器实时刷新 Live Serve

11. 格式化JS，CSS，HTML，JSON文件：JS-CSS-HTML Formatter
快捷键：Alt+Shift+F

12. 代码片段 Vue3 Snippets

{
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features" //保存js文件时同样格式化
  },
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  // #每次保存的时候自动格式化
  "editor.formatOnSave": true,
  // 添加 vue 支持
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  //  #让prettier使用eslint的代码格式进行校验
  // "prettier.eslintIntegration": true,
  // //  #去掉代码结尾的分号
  // "prettier.semi": true,
  // //  #使用带引号替代双引号
  // "prettier.singleQuote": true,
  //  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // #这个按用户自身习惯选择
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // #让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      // "wrap_attributes": "force-aligned",
      "wrap_attributes": "auto",
      // #vue组件中html代码格式化样式
      "prettier": {
        // 格式化不加分号
        "semi": false,
        // 格式化为单引号
        "singleQuote": true
      }
    }
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50

后端插件

python

1.代码校验及风格化

1.base环境下安装flake8#pip install flake8
2.base环境下安装#conda install yapf

  • 1
  • 2

在setting.json中配置

"python.linting.enabled": true,
"python.linting.pylintEnabled": false,
"python.linting.flake8Enabled": true,
"python.formatting.provider": "yapf",

  • 1
  • 2
  • 3
  • 4

如果装了 pylint 的话，要设置其 Enabled = false，否则不用。
79 个字符实在是太短了，我们可以把它改长一点，增加如下配置，把最大长度设为 128 个字符。

"python.linting.flake8Args": ["--max-line-length=128"],

  • 1

2. python开发插件 Python

3. python代码自动缩进 Python Indent

4. python语言包 Python

5. 代码补全 Visual Studio IntelliCode
IntelliCode使用的引擎有两种，默认使用Microsoft Python Analysis Engine，每次进入一个Python工作空间的时候，就会看见下面显示正在加载，一般还会加载很久，受不了的朋友可以在.vscode/settings.json中设置

"python.jediEnabled": true,

  • 1

如果你有一些额外的包需要加入到自动补全中，可以通过如下设置来实现。

"python.autoComplete.extraPaths": "你的包路径"

  • 1

问题处理

  • python第三方库补全
    把site-packages，Scripts第三方库的目录配置到python.autoComplete.extraPaths里面，然后禁用或卸载Pylance插件。
// ===========================第三方库代码补全==============================
    "python.autoComplete.extraPaths": [
    "D:\\opt\\Anaconda3\\envs\\flask\\Lib\\site-packages",
    "D:\\opt\\Anaconda3\\envs\\flask\\Scripts",
    ],

  • 1
  • 2
  • 3
  • 4
  • 5

其他

1. VBA支持 VSCode VBA

2. excel支持 Excel Viewer

3. uml支持 PlantUML

总配置文

{
    // =======================基础配置文===================================
    // 系统主题
    "workbench.colorTheme": "One Dark Pro",
    // 图标主题
    "workbench.iconTheme": "material-icon-theme",
    // 显示tab符
    "editor.renderControlCharacters": true,
    // 显示空格
    "editor.renderWhitespace": "all",
    // 字号
    "editor.fontSize": 18,
    // vscode默认启用了根据文件类型自动设置tabsize的选项
    "editor.detectIndentation": false,
    // 在一定数量的等宽字符后显示垂直标尺。输入多个值，显示多个标尺。若数组为空，则不绘制标尺。
    "editor.rulers": [80],
    //一个制表符等于的空格数。该设置在`editor.detectIndentation`
    "editor.tabSize": 4,
    // #值设置为true时，每次保存的时候自动格式化；值设置为false时，代码格式化请按shift+alt+F
    "editor.formatOnSave": true,
    // 边导航放在右边
    "workbench.sideBar.location": "right",
    // 括号颜色
    "editor.bracketPairColorization.enabled": true,
    "workbench.colorCustomizations": {
        "editorBracketHighlight.foreground1": "#ffd700",
        "editorBracketHighlight.foreground2": "#da70d6",
        "editorBracketHighlight.foreground3": "#87cefa",
        "editorBracketHighlight.foreground4": "#ffd700",
        "editorBracketHighlight.foreground5": "#da70d6",
        "editorBracketHighlight.foreground6": "#87cefa",
        "editorBracketHighlight.unexpectedBracket.foreground": "#ff0000"
    },
    // end括号颜色
    // 解决code runner乱码问题
    "code-runner.runInTerminal": true,
    // =======================基础配置文===================================

    // ====================python 配置文====================================
    /*先安装anaconda发行库，在anaconda发行库的主python上用pip install 安装flake8、yapf
在扩展商店上安装anaconda、m-python.python**/
    // 代码检查flake8
    "python.linting.pylintEnabled": false, //关闭系统自带的校验工具
    "python.linting.flake8Enabled": true, //使用flake8
    // anaconda主python上的flake8路径
    "python.linting.flake8Path": "D:\\opt\\Anaconda3\\Scripts\\flake8",
    // 每行字符数
    "python.linting.flake8Args": ["--max-line-length=120"], 
    // python代码格式化
    "python.formatting.provider": "yapf", //指明python格式化工具用yapf
    "python.formatting.yapfPath": "D:\\opt\\Anaconda3\\Scripts\\yapf", //yapf的路径
    // 每行字符数
    "python.formatting.yapfArgs": ["--style", "{column_limit: 120}"],
    
    // ===========================第三方库代码补全==============================
    "python.autoComplete.extraPaths": [
        "D:\\opt\\Anaconda3\\envs\\flask\\Lib\\site-packages",
        "D:\\opt\\Anaconda3\\envs\\flask\\Scripts"
    ],
    // ===========================第三方库代码补全==============================

    // ====================python 配置文====================================

    // =======================前端代码格式化===========================
    /*须安装ESlint、vetur、Prettier **/
    // #每次保存的时候将代码按eslint格式进行修复
    // 添加 vue 支持
    //  #让prettier使用eslint的代码格式进行校验
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
    "eslint.alwaysShowStatus": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact",
        "vue"
    ],

    //  #让prettier使用eslint的代码格式进行校验
    //  #去掉代码结尾的分号
    "prettier.semi": false,
    //  #使用带引号替代双引号
    "prettier.singleQuote": true,
    "prettier.tabWidth": 4,
    //  #让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,

    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "eslint.workingDirectories": [{ "mode": "auto" }],
    "prettier.useTabs": true,
    "files.autoSave": "off",
    "explorer.confirmDelete": false,
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "diffEditor.ignoreTrimWhitespace": false,
    "terminal.integrated.defaultProfile.windows": "Command Prompt",
    "[python]": {
        "editor.defaultFormatter": "ms-python.python"

    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[vue]": {
        "editor.defaultFormatter": "Vue.volar"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "python.analysis.extraPaths": [
        "D:\\opt\\Anaconda3\\envs\\flask\\Lib\\site-packages",
        "D:\\opt\\Anaconda3\\envs\\flask\\Scripts"

    ], // 两个选择器中是否换行

    // ========================前端代码格式化=============================
    // ========================golang============================
    "go.useLanguageServer": true,
    "tabnine.experimentalAutoImports": true,
    "workbench.startupEditor": "none"
    // ========================golang============================

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132

使用技巧

快捷键

1. 注释：

  • 单行注释： ctrl+k,ctrl+c]或 ctrl+/
  • 取消单行注释： ctrl+k,ctrl+u (按下ctrl不放，再按k + u)
  • 多行注释： alt+shift+A
  • 多行注释： /**

2. 移动行： alt+up/down

3. 显示、隐藏左侧目录栏 ctrl + b

4. 复制当前行：shift + alt +up/down

5. 删除当前行：shift + ctrl + k

6. 控制台终端显示与隐藏：ctrl + ~

7. 查找文件/安装VS Code插件地址：ctrl + p

8. 代码格式化：shift + alt +f

9. 新建一个窗口 : ctrl + shift + n

10. 行增加缩进: ctrl + [

11. 行减少缩进: ctrl + ]

12. 拓展管理 : ctrl + shift + x

13. 字体放大/缩小: ctrl + ( + 或 - )

14. 拆分编辑器 : ctrl + 1/2/3

15. 切换窗口 : ctrl + shift + left/right

16. 关闭编辑器窗口 : ctrl + w

17. 关闭所有窗口 : ctrl + k + w

18. 切换全屏 : F11

19. 自动换行 : alt + z

20. 显示git : ctrl + shift + g

**21. 全局查找文件：**ctrl + shift + f

22. 显示相关插件的命令(如：git log)：ctrl + shift + p

23. 选中文字：shift + left / right / up / down

24. 折叠代码： ctrl + k + 0-9 (0是完全折叠)

25. 展开代码： ctrl + k + j (完全展开代码)

26. 删除行 ： ctrl + shift + k

27. 快速切换主题：ctrl + k / ctrl + t

28. 快速回到顶部 ： ctrl + home

29. 快速回到底部 : ctrl + end

30. 格式化选定代码 ：ctrl + k / ctrl +f

31. 选中代码 ： shift + 鼠标左键

32. 多行同时添加内容（光标） ： ctrl + alt + up/down

33. 全局替换： ctrl + shift + h

34. 当前文件替换： ctrl + h

35. 打开最近打开的文件： ctrl + r

36. 打开新的命令窗： ctrl + shift + c

37. 资源管理器 ： Ctrl + Shift + E

同时进行多行的编辑

如果要插入/删除多个相同文本的实例，可以创建一个多光标(Multiple cursor)。按住 Alt按键，然后每点击一次，光标就在当前位置停住。每一次点击创建一个新的光标，就可以同时编辑这些位置。

查看函数或者类的定义

Ctrl+鼠标左键点击函数名或者类名即可跳转到定义处，在函数名或者类名上按F12也可以实现同样功能

更改变量名

在变量名上按F2即可实现重命名变量

python断点调试

在行号的左边点击即可设置断点，在左边的调试界面可以查看变量的变化

隐藏菜单栏

这个属于个人习惯，如果你也感觉菜单栏很碍眼，可以点击查看->切换菜单栏，即可隐藏菜单栏。需要菜单栏的时候按Alt键即可查看

设置快捷键

文件->首选项->键盘快捷方式，将需要的修改的快捷键的整个大括号里面的内容复制到右边keybindings.json文件中，然后修改“key”的值为你需要的快捷键即可。我这边只修改了复制一行和删除一行的快捷键。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/article/detail/50023
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号