Visual Studio Code(약자 VS Code)는 편리한 프로그래밍 에디터 입니다. Visual Studio Code (VS Code)는 크로스 플랫폼 소스 편집기로서 윈도우즈, 리눅스, Mac OS 에서 무료로 사용할 수 있습다. Visual Studio Code를 설치한 후 여러 Extension들을 설치할 수 있는데, 파이썬 Extension을 설치하면, 파이썬 프로그래밍과 디버깅을 할 수 있습니다.
User Installer는 현재 로그온된 사용자 계정에만 설치를 하며, System Installer는 Windows 전체 사용자 계정에서 사용할 수 있도록 설치(관리자 권한 필요)합니다. 저는 System Installer 버전을 다운로드하여 설치하겠습니다.
기본 옵션으로 설치를 끝까지 진행 합니다. 마지막에는 자신이 편리한대로 설정해 줍니다.
VSCode 가 설치 완료되면 필요한 Extension 들을 설치해 줍니다. Visual Studio Code를 설치한 후 여러 Extension들을 설치할 수 있는데, 파이썬 Extension을 설치하면, 파이썬 프로그래밍과 디버깅을 할 수 있습니다.
좌측 상단에 python을 입력하면 여러가지 Extension들이 나타납니다. 이중 Python Extension Pack 을 설치하면 Python, MagicPython, Visual Studio InteliCode, Django 등이 한꺼번에 설치됩니다. 이렇게 파이썬 Extension을 설치 완료하면 파이썬 프로그래밍을 진행할 수 있습니다. korean language pack 도 설치해 줍니다.
Pylance, Material Theme, Material Icon Theme, Prettier 등 필요한 Extension 들을 설치해 줍니다.
Pylance : Fast, feature-rich language support for Python
Prettier : 파일 저장시 알아서 포매쇼에 맞게 소스 코드 정
이제는 Visual Studio Code의 기본 터미널이 Windows의 Power Shell로 설정되어 있기 때문에 약간의 수정이 필요합니다.
이 기본 터미널의 종류를 cmd 또는 cmdGit Bash로 변경하면 오류없이 실행이 가능합니다. 먼저 Ctrl + Shift + P (컨트롤 + 쉬프트 + P) 키를 눌러 Command Palette를 열고 Terminal: Select Default Shell 을 입력합니다.
VS Code에서 파이썬 코드를 작성하기 위해서는 확장자 .py 를 가진 임의의 파이썬 파일을 생성하면 됩니다. [File] 메뉴에서 [New File]을 눌러 새 파일을 만들면 됩니다. 새 파일을 만드는 것보다 C:\ 에 'korAI'라는 새로운 작업 폴더를 만들어 줍니다.
이 작업 폴더에 새 hello.py 파일을 생성하고 에디터에서 코드를 작성합니다. 그리고 해당 폴더에 저장 합니다.
print("Hello World")
코드를 실행하기 전에 인터프리터를 선택해야 합니다. Ctrl + Shift + P (컨트롤 + 쉬프트 + P) 키를 눌러 Command Palette를 열고 Python: Select Interpreter 을 입력합니다.
여기에 가상 환경 설정에서 지정한 koreait 폴더내의 인터프리터를 지정합니다.
koreait 가상환경을 activate 합니다.
코드 작성 완료 후 프로그램을 실행하기 위해서는 [Debug] 메뉴의 [Start Debugging (F5)] 나 [Start without Debugging (Ctrl+F5)]를 누르면 됩니다.
특히 F5를 눌러 디버깅 모드로 실행하면, 로컬변수, 콜스택 등 여러 디버깅 정보를 이용할 수 있으며, Step Over, Step Into 등의 디버거 컨트롤을 사용할 수 있다.
파이썬 파일에 코드를 작성한 후, VS Code 에디터에서 우측 마우스 버튼을 클릭 [Run Python File in Terminal] 메뉴를 선택하면 하단에 터미날 창이 생기고 파이썬 프로그램을 인터프리터와 함께 실행해 준다.
Flutter는 풍부한 모바일, 데스크톱 및 웹 애플리케이션을 개발하는 데 사용되는 가장 수요가 많은 교차 플랫폼 UI 프레임워크 중 하나입니다.Flutter 사용자의 수가 증가함에 따라 개발자가 작업을 신속하게 처리할 수 있도록 광범위한 플러그인 및 추가 기능을 사용할 수 있습니다.이 게시물에서는 Flutter 프로그래밍을 위해Visual Studio Code IDE에서 활용하는 상위 10개 확장에 대한 세부 정보를 제공합니다
Pubspec Assist
Error Lens
Flutter Tree
Bracket Pain Colorizer 2
Dart Data Class Generator
Flutter Stylizer
Better Comments
Color Highlight
Markdownlint
JSON to Dart Model
Flutter 앱 빌드를 위해 Visual Studio Code에서 Flutter 및 Dart 추가 기능을 이미 찾고 설정했다고 믿습니다.그렇지 않은 경우Flutter및Dart용 Visual Studio Marketplace에서 가져올 수 있습니다 .
VS Code에서 확장 설치에 익숙할 수 있습니다.그러나 초보자를 위해 여기에서 설명했습니다.왼쪽 메뉴에서 확장 프로그램 아이콘을 클릭하고 검색 상자에 원하는 확장 프로그램 이름을 입력하고 필요한 확장 프로그램을 선택한 다음 설치를 클릭합니다.
#1 Pubspec Assist
Are you tired of trying to locate the necessary Flutter and Dart packages on pub.dev? You should give the Pubspec Assist extension a go. This extension permits you to search for packages without relinquishing your editor and then appends them to the pubspec.yaml document. Moreover, it allows you to look for numerous packages simultaneously by separating the titles with commas.
#2 Error Lens
Errors and warnings are normal during development, but the methods we use to handle them are unique. In the VS Code editor, the errors and warnings are usually shown at the bottom, and we must scroll through the list to see if there are additional problems.
TheError Lens extensionhighlights the error lines in the code and appends the error details at the end of the line. Error icons are also displayed in the gutter.
Also, you can customize the color of the error highlight in the settings.json file. This will make your mistakes appear more enticing.
#3 Flutter Tree
It’s difficult to recognize widgets in a tree when you construct an application with a large number of widgets. TheFlutter Tree extensioncreates the desired widget tree with simplified syntax. This makes the creation of widget trees much easier, but you have to use its own syntax to do so, which is as follows.
#4 Bracket Pair Colorizer 2
We are frequently lost in the maze of nested classes and widgets, wasting a lot of time and effort attempting to find the correct bracket pair.Bracket Pair Colorizer 2is a lifesaver when it comes to locating misplaced brackets.
You can also customize the color of bracket pairs.
#5 Dart Data Class Generator
Often, we overlook the creation of required methods in a class. VS Code has a utility that allows you to add missing methods, but you can only add one at a time. TheDart Data Class Generatorovercomes this by building Dart data classes with the constructor, copyWith, toMap, fromMap, toJson, fromJson, toString, operator ==, and hashCode methods based on class attributes or raw JSON, as the name implies.
This extension also sorts the imports alphabetically and converts them to a proper format.
#6 Flutter Stylizer
Managing a complex code repository that is not structured adequately diminishes engineer efficiency. TheFlutter Stylizerextension erases this problem by organizing your methods in a consistent and opinionated way.
This tool organizes the classes within the file in the following manner:
Constructor — named constructor — public static variables — public instance variables — public override variables — private static variables — private instance variables — public override methods — other public methods — build method.
Flutter itself provides formatting choices, however, it only formats Dart files and it doesn’t re-order the code. Flutter formats the code based on theseformatting rules.
#7 Better Comments
If all comments are in the same format, we won’t be able to arrange the work in order of importance, and there’s a risk of ignoring important tasks. TheBetter Commentsextension aids in the creation of colorful comments, which makes them more readable. This makes it easier to keep track of the code comments.
All you have to do is start a comment with *, !, ?, or TODO, and it will be colored in an assigned way. You can also create your own comment styles using the settings.json file.
#8 Color Highlight
We manage an extensive selection of colors while constructing a program, yet suppose the shades we’re programming were discernible in the code editor? This would be remarkably advantageous by exhibiting the program colors without needing to initiate the program. TheColor Highlightadd-on makes it possible to view the colors that are specified by styling the color in our code.
#9 Markdownlint
No validators in the Flutter project can ensure the detection of problems in README.md or CHANGELOG.md documents. To remedy this, theMarkdownlintplugin provides a set of guidelines to encourage Markdown file standards and uniformity. You can use this extension to check for problems locally and verify the content before publishing it live. Browse theuser manualto learn more about rules.
In this image, you can see errors like multiple consecutive blank lines, heading levels should increment by one, and the list should be surrounded by blank lines. On a related note, I would like to remind you that you can preview Markdown files in VS Code by using the Preview button.
#10 JSON to Dart Model
When dealing with n amount of JSON files, constructing Dart models for each one is laborious.JSON to Dart Modelcreates a Dart class for the given JSON string. It’s possible to make JSON values required or default by adding r@ or d@ to your JSON key, and JSON to Dart Model will produce Dart models for you.
In the following figure, the JSON file is shown on the left, and the required classes and properties are shown on the right, which is produced from the JSON file using the JSON to Dart Model extension.
Add entry intoauto-rename-tag.activationOnLanguageto set the languages that the extension will be activated. By default, it is["*"]and will be activated for all languages.
The setting should be set with language id defined inVS Code. Takingjavascript definitionas an example, we need to usejavascriptfor.jsand.es6, usejavascriptreactfor.jsx. So, if you want to enable this extension on.jsfile, you need to addjavascriptin settings.json.
Note
From 1.44, VS Code offers the built-inauto update tagssupport for HTML and Handlebars that can be enabled with the settingeditor.linkedEditing. If this setting is enabled, this extension will skip HTML and Handlebars files regardless of the languages listed inauto-rename-tag.activationOnLanguage
Before working on a new project, you surely need to organize your previous one and make everything structured. A Visual Studio Code extension called VSCode Project Dashboard enables you to organize your projects in any possible way. You can access frequently used files, folders, and SSH remotes quickly, and pin them to a dashboard.
If you’re constantly using GIT, then you definitely need to install this extension. With Git Graph, you can easily view your history, and all your commits and manipulate them all. As you can see in the example below, you can directly access every important aspect of your repository right inside of VSCode, which is pretty useful. Even if you haven’t used Git, you should start to. It’s the easiest and best way to work with your team, and it will improve your workflow exponentially!
If I knew about this extension, I wouldn’t be so sloppy in my coding and could accomplish my tasks more quickly. Toggle Zen Mode adds a new button. When you press on this button, it will activate VSCode’s Zen mode feature and remove all unnecessary clutter from the screen. In other words, it helps you to be more focused on your code and fall into a flow statement, which will significantly increase your productivity and efficiency!
The next extension in our list is Peacock, which has over 1.9 million downloads; however, many developers still haven’t heard of it before. It simply changes the color of your Visual Studio Code workspace. Ideal for quickly identifying your editor when you have multiple instances of VS Code or use VS Code's Remote features.
The Web 3.0 sphere and all technologies related to it, such as crypto, NFT, DeFi, and many others, are booming right now. I wrote an article about the importance of Web 3.0 in the future and why you should pay attention to it. And many developers working in this sphere are struggling with writing smart contracts on Solidity, which is a programming language for Ethereum. Truffle for VS Code simplifies how you create, build, debug, and deploy smart contracts on Ethereum and all EVM-compatible blockchains and layer 2 scaling solutions. So if you're a blockchain developer, you surely need it!
TheRemote — SSHextension lets you use any remote machine with an SSH server as your development environment. This can greatly simplify development and troubleshooting in a wide variety of situations. You can either develop on the same operating system you deploy to or use larger, faster, or more specialized hardware than your local machine. Also, quickly swap between different, remote development environments and safely make updates without worrying about impacting your local machine.
It’s a simple and powerful extension to add wrapper snippets around your code blocks. By using Surround extensions, you can upgrade your code to another level. You can wrap already existing lines and turn them into a function, a loop, a try/catch method, and many other essential methods.
I hate CSV files. There’s nothing structured, and I get really bored with constant searching for specific information that I need. If you’re also struggling with these types of problems and want to make your CSV file readable, then this extension is right for you! It highlights different types of data and shows them to you in a better way.
Better Comments is a pretty popular extension; however, I still want to add it to this list. As you might guess from the title, it helps you write better comments for your code. If you’re always struggling with default gray comments and lose focus finding the important one, then this extension is right for you. It will make your comments look prettier and will help others understand your code much easier!
This extension was previously covered in one of my other lists. It’s definitely for you if you frequently work with databases or simply need some random information for the test, even though I think it’s really cool. Names, numbers, and even email addresses can all be generated at random using Random Everything. So, yeah, it’s pretty cool and essential for everybody!
One of the latest extensions on the list is Resouce Monitor. There’s nothing so difficult in this extension. It just shows you some information about your system and usage. It can display CPU frequency, usage, memory consumption, and battery percentage remaining within the VSCode status bar.
Everyone is tired ofOne Dark Pro, right? Me too. So, there’s probably a better alternative to make your VS Code even prettier. It’s called "shades of purple," and yeah, you guessed right, it’s a purple color scheme for your IDE. However, there are no toxic colors, and it looks pretty nice. I’ve switched to this theme myself and am happy with the results!
