VScode配置前端及Django环境

安装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保存代码,浏览器即可刷新

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

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

6. 代码格式化程序 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

7. Bracket Pair Colorizer 2 (必备)
   　　给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色　　
8. Color Highlight 显示颜色
   
9. HTML Snippets (必备)
   　　智能提示HTML标签，以及标签含义

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

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

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

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

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

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

13. 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

4. 激活python虚拟环境:

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


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

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

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

5. 配置django工程启动文件(图片有点乱,选择的顺序是,从左往右,从上往下)
   

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

顺次点击之后,会出现下面绿框中的代码:

然后,ctrl+s保存一下,右侧会出现黄颜色的框。点击一下，然后，终端中就有了变化：

点击即可进入！