This time, in 6 weeks, I participated in a project from team building to product release. Please see the link below for the entire project. I would like you to read the articles and past articles about me, but in short, I am inexperienced and looking for a job as an engineer.
This article is the first time I've used VScode in this project, so I'll summarize it. I've been using Sublime Text 3 so far, so it's a transition from there.
In a nutshell, it's editor software, that is, something you use to write something. You may have heard of text editors, but think of VScode as an editor software that is more specialized for programming purposes.
I think there are various things, so if you ask Google Sensei "SublimeText3 Vscode difference", I think that seniors are talking passionately, so that is helpful. The big difference I felt was that it came with a terminal (command prompt) and that it was intuitive to use besides looking complicated. Especially for the former, you can start the terminal from the open directory, so it's much easier because you don't have to open the command prompt and move to the execution directory. I think that VScode is easy to do even for the throat that has been translated into Japanese and introduced extensions.
--Introduced VScode
Please install from Official Site. If you are a Windows user and have not installed it yet, install Git for Windows as well. Git for Windows
After installation, start the command prompt and check the PATH. Don't forget to check the setting to add PATH when installing. If it passes, each version will be displayed with the code below. If it does not pass, in the case of Windows, you can open the detailed system settings from the Win key + Pause key and jump to the environment variable settings from there, so let's set it there.
$ code -v
$ git --version
After the introduction, let's translate it into Japanese. If you are strong in English, you don't have to do it. First, open VScode and click on this part. Then, a field where you can search for the extension will appear like the image, so you can search and introduce various things from here. Since you want to translate it into Japanese here, please search for "Japanese Language Pack" and install it. Japanese localization is complete when VScode is restarted after installation.
This is not limited to VS code, but it is a standard feature of any coding editor. It complements code and methods, and visualizes variable type and parameter information.
It is a function that can call a fixed phrase.
For example, if you type mo as shown in the image below, something like predictive conversion will appear and candidates will be displayed.
If you select the model at the top here, you can call up the fixed phrase of the model class in Django as shown on the right of the image.
You can install it for each language or framework from the extension, or you can create it yourself like an image.
Call the command palette like the image with Ctrl + Shift + P and type snippet to get it.
Since the snippet is described in the Json file, please see the reference article for details on how to do it.
Git is normally done by typing a command in the terminal, but VScode eliminates that need.
If you click the Git icon as shown in the image, the source control screen will appear, and from here you will be able to handle functions and processes related to Git such as staging, commit, push, etc.
This was very handy, because it makes it easy to see which files are waiting for staging, the staging is visible, and you don't have to commit each -m command.
Extensions related to this are Git Lens and Git History.
These can be done because there is a function to display the branch tree on VScode to check the commit log and display the difference of the file in an easy-to-understand manner, so I think that it will be easier to use Git if you include it. ..
You can debug by opening the file you want to debug and pressing the image icon. If Django doesn't detect the error in debugging, it will move to runserver as it is. Isn't there an error when writing the code for the time being? You can feel free to confirm that. I have to create a launch.json file to customize it, but this time I don't understand it enough so I'll omit it. For details, see the item on environment construction.
In addition, if you have an extension, an icon will be added to the sidebar to use the function. The image is an example of GitLens.
After holding down the basics, we will start building the environment. This environment is the one actually used in the project.
The key is a tool called PipEnv. Let's move on.
If you don't install these two in both rabbits and horns, it won't start. First, install any version of Python from the Official Site. The version to be installed differs depending on the OS and OS version, so check before installing. Don't forget to ask if you want to install pip and add PATH on the setup screen during installation. After installation
pip install pipenv
Install pipenv with this command.
On the VScode side, select the Save project folder from file to folder in workspace item and save it in the workspace.
After that, hit the ctrl +, key, and when the screen looks like the image, press the red arrow icon with the project folder item selected as shown by the blue arrow.
Then the root directory .vscode/setting.json will be created, so describe the settings there.
Note that this seems to be a technique for defining one folder as a workspace.
Another method is to create a multi-root workspace that manages multiple folders in one workspace.
By the way, the multi-root workspace has the highest priority for setting.
As a procedure
It becomes the procedure.
The file corresponding to .vscode/setting.json will be the name of the project folder.code-workspace, so you will need to write the settings there.
Even in this case, if you don't need to use it as a multi-root workspace, you can edit only .vscode/setting.json and it seems to be a problem.
The point seems to be the difference between managing multiple project folders in one workspace or not.
Workspace settings must be done when working with VScode, but it's rather complicated.
I didn't understand at all when I first tried to do it, and I still don't understand the detailed settings.
Fortunately, our ancestors have published the settings, including the articles listed in the reference articles, so please refer to them.
This time I will try the setting of .vscode/setting.json.
Describe various settings here, for example, as follows.
{
//Please specify the path of the virtual environment
"python.venvPath": "{$workspaceFolder}/.venv",
"python.autoComplete.extraPaths": [
"{$workspaceFolder}/.venv/Lib/site-packages",
],
// :Specify the Python path below.
"python.pythonPath": ,
//Pin the terminal specifications to the command prompt.
"terminal.integrated.shell.windows": "C:/WINDOWS/System32/cmd.exe"
}
The path of the virtual environment is
pipenv --venv
You can get it by typing this command. ..
Unless you have special settings
C: \ Users \ username \ .virtualenvs \ folder name -XXXXXXXX
Or if you have set PIPENV_VENV_IN_PROJECT = true
{Workspace folder \ .venv}
You will get a pass like this.
That will be the path of the virtual environment.
In the process up to this point, the Python path in the virtual environment should be Virtual environment path \ Scripts \ python.exe.
By the way, to see the python related paths in the virtual environment
pipenv shell
python
import sys
sys.path
If you type the code in the above order, it will appear in the list. Please refer to the reference article for other settings.
Actually, there are two main ways to build an environment with PipEnv. One is to build it from scratch and the other is to reproduce the environment prepared by others. This time it was a team development, so I did it by reproducing the environment prepared by the person in charge of design, but here I will also see how to do it from 1 for later study.
First of all, it is a way to build an environment from scratch. But what to do
#Build a virtual environment in the project directory
set PIPENV_VENV_IN_PROJECT=true
#Please write the Python version in the version part
pipenv --python version
Just type the command in the project directory.
If you do not follow the above steps, the virtual environment will be created in C: \ Users \ username \ .virtualenvs \ folder name -XXXXXXXX.
It seems that it is recommended to put it under the project as much as possible because it is troublesome to manage.
By the way, I skipped this setting because I didn't understand much about this project.
The Python version specifies the version of Python that was installed earlier, but if you specify a version that is not included, PipEnv will automatically install that version of Python.
Hitting this command will create a file with Pipfile in your project's directory.
This Pipfile is the heart of building the environment in PipEnv, so let's take a look at this file immediately after typing the command.
[[source]]
name = "pypi"
url = "https://pypi.org/simple"
verify_ssl = true
[dev-packages]
[packages]
[requires]
python_version = "3.8"
There are three parts to focus on: dev-packages, packages, and requires.
dev-packages specifies the library to be used only in the development environment.
packages specifies the libraries to use in production.
requires is the Python version required for this project (application).
If you don't need this part, you can delete it.
The actual Pipfile is as follows, for example.
[[source]]
name = "pypi"
url = "https://pypi.org/simple"
verify_ssl = true
[dev-packages]
flake8 = "*"
mypy = "*"
[packages]
django = "==2.2"
django-bootstrap4 = "*"
pandas = "*"
click = "*"
numpy = "*"
importlib-metadata = "*"
bs4 = "*"
requests = "*"
django-allauth = "*"
lxml = "*"
[scripts]
start = "python manage.py runserver"
manage = "python manage.py"
Install the package in the form pipenv install ~.
If you want to add it to dev-packages, add the --dev option.
script This is where you can define your own commands on PipEnv. More on that later.
Next is how to reproduce the environment from the existing Pipfile.
However, this is not difficult either
pipenv install
# dev-Click here to reproduce including packages
pipenv install --dev
Just type the command.
By the way, when you install the PipEnv library, a file called Pipfile.lock is created.
This is a file that defines each library version in more detail. If you want to reproduce the environment more strictly than the state of Pipfile, use this file.
In that case
pipenv sync
# dev-Click here to reproduce including packages
pipenv sync --dev
And type the command.
Now that you're roughly ready, let's add Django. Before that, let's put the Python add-in in the extension here. Search for python from the extension icon and install the first thing that appears.
After that, install the libraries and packages.
You can define it in Pipfile first and then use the pipenv install command at once, or you can install it individually in the form of pipenv install django.
Anyway, if you can install Django anyway, run the pip list command after the pipenv shell command to see if the installation was successful.
After installing Django, let's go to runsever at once.
First, open the command palette from [View] and check that it looks like the image.
Then there is an item to select the interpreter (Python this time), so if you click on it, there will be a list of virtual environments as shown in the second image, so select the virtual environment you created earlier.
Then, the information of the selected virtual environment should appear at the bottom like the image. The virtual environment is now complete.
After that, you can create a Django project with the start project command and run server, but this time I will try it from the debug icon instead of the command.
Click the debug icon and click the Create launch.json file part of the image.
Then a command palette will appear, so if you select Python, you will see a Django item this time, so select it.
Then, it will look like the image, so click on the green triangle button.
If there is no problem here, runserver is completed. Go to the rocket page at any local address.
This completes the construction of the virtual environment, thank you for your hard work.
It is a memorandum about the operation with PipEnv.
#Enter the virtual environment
pipenv shell
#Display the path of the virtual environment
pipenv --venv
#Set the location of the virtual environment
export WORKON_HOME=~/venvs #Set WORKON on Windows_HOME=~/venvs
pipenv --python
#Create a virtual environment in the project directory
set PIPENV_VENV_IN_PROJECT=true`
pipenv --python
#Delete virtual environment
pipenv --rm
#Install by specifying the package version
pipenv install django = "==2.2" #If not specified, django= "*"To
#Install the GitHub repository in your virtual environment
#Check the revision from tags on Github, it's like the version of that package
pipenv install git+https://github.com/<User>/<Repository>.git@<Revision>#egg=<package name>
#Package update
pipenv update
#List installed packages(You can also see the dependencies)
pipenv graph
I've written it so far, but if you organize the procedure largely
It means that.
It is undeniable that my article may be difficult to understand in the first place, but environment construction is also a barrier for beginners in the first place, and even if you actually refer to the reference article or google it yourself, it will still be clogged. There is.
So, if you try to be aware of which procedure you are working on right now, it will be easier to discover where you are stuck and what you do not understand.
One more point is that we don't do much extra work in the environment construction part.
For example, in this case, if you can build an environment with PipEnv in the workspace to see some patterns in the reference article, there is a possibility that it will pass to runserver even if you do not set .vscode/setting.json etc. There is.
So I think it's a good idea to go through the runserver for the time being, and then check the setting method such as .vscode/setting.json and what happens if you set it one by one.
If runsever doesn't pass, you'll always get an error message such as Python not found or path not found by then.
Then, try setting with .vscode/setting.json etc .... I think it's good at first.
It's common to get hooked on a swamp when trying to get stuck from the beginning ...
Template of Python development environment by VS Code Procedures for developing Django with VSCode Python development summary using Pipenv Python development environment with Windows + Python + PipEnv + Visual Studio Code [Escape beginners in the fastest way by mastering the nice features of Visual Studio Code! 《Introduction to VS Code Practice》](https://employment.en-japan.com/engineerhub/entry/2019/06/21/103000#%E3%82%A4%E3%83%B3%E3%83%86% E3% 83% AA% E3% 82% BB% E3% 83% B3% E3% 82% B9% E3% 83% A6% E3% 83% BC% E3% 82% B6% E3% 83% BC% E3% 82% B9% E3% 83% 8B% E3% 83% 9A% E3% 83% 83% E3% 83% 88% E3% 81% A8% E3% 83% 90% E3% 83% BC% E3% 82% B8% E3% 83% A7% E3% 83% B3% E7% AE% A1% E7% 90% 86) How to get started with VS Code 2020 Summary Visual Studio Code Operation Memo [For python beginners] Prepare the development environment for python web frameworks using pipenv and Visual Studio Code Maybe this is the easiest. Building a Python virtual environment on Windows 2019 Procedure to set up Python virtual environment in Visual Studio Code