VScode配置前端及Django环境

     阅读:31

安装vscode

因为写得时间比较早了,故第一部分的引用,被遗漏了。在此先对原作者说声抱歉。本文的主题是对一些博客的好方法,进行实践,然后,集成。感谢大家支持。

下载软件:https://code.visualstudio.com/
首先:

安装语言包:Chinese (Simplified) Language Pack for Visual Studio Code,然后关闭VSC再打开.
如果还不显示,就用 “Ctrl+Shift+P”-“display”- “Enter”-选择zh-CH
解决中文注释乱码问题:
左下角齿轮设置-设置ctrl+,- 输入Files.autoGuessEncoding-勾选猜测字符集编码
快捷键: 单行注释:ctrl + /; 取消注释 :CTRL+K+U

几个有用的HTML编写插件

  1. emmet:
    使用专门开一个笔记07emmet使用笔记

  2. 格式化插件 vuter
    代码高亮,可能还有其他作用~还不会用
    Vue多功能集成插件,包括:语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger。vscode官方钦定Vue插件,Vue开发者必备。
    代码格式化参考三步搞定 vscode 代码格式化

  3. open in brower,安装之后就可以用游览器打开html文件
    选中.html文件,右击打开

  4. Live Server VSCode前端文件(html文件)以服务器模式打开
    可以实时查看页面的结果,使用方法:

窗口的右下角点击Go Live,(或者文件上单击右键,选择Open With Live Server这一项)
每次ctrl+S保存代码,浏览器即可刷新

  1. CSS Peek
    使用此插件,你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时,选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置的 CSS 代码。

选中样式(如class值),右击,去往定义

  1. 代码格式化程序 Prettier - Code formatter
    Prettier 是目前 Web 开发中最受欢迎的代码格式化程序。支持格式化的语言有:JavaScript,TypeScript,Flow,JSX,JSON,CSS,SCSS,Less,HTML,Vue,Angular,GraphQL,Markdown,YAML。
    安装了这个插件,它就能够自动应用 Prettier,并将整个 JS 和 CSS 文档快速格式化为统一的代码样式。如果你还想使用 ESLint,那么还有个 Prettier – Eslint 插件,你可不要错过咯!

使用方法:
格式化某个文件时,在打开文件的当前页按shift + alt + f
格式话某段代码时,先选中这段代码,在按 shift + alt + f

  1. Bracket Pair Colorizer 2 (必备)
      给括号加上不同的颜色,便于区分不同的区块,使用者可以定义不同括号类型和不同颜色  在这里插入图片描述
  2. Color Highlight 显示颜色
    在这里插入图片描述
  3. HTML Snippets (必备)
      智能提示HTML标签,以及标签含义

下面的几个倒是暂时还没用到

  1. HTML CSS Support (必备)
      智能提示CSS类名以及id
      在class="" 这里写的时候可以就有提示了,或者直接写.开头。

  2. Markdown Preview Enhanced (推荐)
      实时预览markdown,markdown使用者必备

  3. Dracula Official (推荐)
      很好看的一款主题风格

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

  5. Debugger for Chrome (推荐)
      映射vscode上的断点到chrome上,方便调试
      好像是调js文件的,参考
      vs code 配置调试工具 Debugger for Chrome

  6. Quokka 是一个调试工具插件,能够根据你正在编写的代码提供实时反馈。它易于配置,并能够预览变量的函数和计算值结果。另外,在使用 JSX 或 TypeScript 项目中,它能够开箱即用。
    var result = multiply(20,5) # 会显示100
      没搞懂!!!

配置Django环境

参考文章: vscode配置django环境(一)

  1. 在VScode左侧,下载Django插件,作者推荐版本1.0.2,我使用的是1.6.0.此外,还要下载python插件。这些是插件,分别用于管理Django和python,并不等于项目运行中的包本身。
  2. 在VScode之外,新建Django项目python虚拟环境(可用使用pycharm或anaconda建),我已经有了,就不再新建
  3. 输入组合快捷键ctrl+shift+p,关联刚才创建的python虚拟环境:

输入框输入python interpret,选择出现的python:选择解释器,然后选择自己要用的python虚拟环境中的python.exe

  1. 激活python虚拟环境:

输入组合快捷键ctrl+shift+` 在vscode内打卡一个命令行终端,然后,选择向下箭头,


这样,就能正常启动第2步创建的虚拟环境.选择+号, 打开一个新的终端, 这时候打开的就是cmd的终端, 同时我们python虚拟默认就被启动起来了,如下所示,黄线会被自动执行:

最后,自己的环境名(这里是job_0802_web_vsc)到达命令行的最开头,说明python环境被成功激活.

PS: 如果自己的环境中没有Django包,那此时就在命令中pip install django

  1. 配置django工程启动文件(图片有点乱,选择的顺序是,从左往右,从上往下)
    在这里插入图片描述

注意: 需要先关联号python环境, 并且安装好django以后, 再开始配置django启动文件, 否则, 选择创建launch.json文件时, 不会出现后续的python选项以及django选项

顺次点击之后,会出现下面绿框中的代码:
在这里插入图片描述
然后,ctrl+s保存一下,右侧会出现黄颜色的框。点击一下,然后,终端中就有了变化:
在这里插入图片描述
点击即可进入!