Hello everyone. In this article, I would like to talk about my developer environment by going beyond technical topics. I use VsCode as an IDE while developing my Flutter projects and I like to personalise my work environment and make it more visually colourful. Besides, I need tools that will make the coding process more efficient and enjoyable. This is where Visual Studio Code (VSCode) and its great plugins come into play. If you are developing projects with Flutter, the plugins I use will make your work easier and help you complete your projects faster. Let’s take a look at the 10 most popular plugins together!
Note: I have not included the essential Flutter and Dart plugins for Flutter projects because they are already required to be downloaded and installed.
1- Better Comments
It is a great tool to make the comments you make in your code more effective. The comments you make while writing code can both speed up your own workflow and help others understand your code. Better Comments categorises comments into specific categories, making them more understandable and visually appealing. This makes it easier to navigate your code and notice important notes.
Highlights:
Different Types of Comments
- Better Comments makes different types of comments more prominent by colouring them. These types include categories such as to-dos (TODO), warnings, questions, and many more.
- TODO comments: Comments describing work to be done are usually written as
// TODO:and are highlighted with a specific colour thanks to this plugin. - Question marks: Comments that you use to indicate questions about the code (for example,
// ? Why is this line like this?) are highlighted in a separate colour. - Warnings: Comments in which you indicate important warnings are also marked with a separate colour (for example,
// ! This function consumes a lot of performance).
Use Cases:
- In large and complex projects, you can mark which parts of your code you need to pay attention to with coloured comments.
- While writing your code, you can mark unfinished work with the TODO tag and then quickly return to it later.
- During code reviews, you can mark the lines that are incorrect or need to be revised with warnings and draw the attention of your teammates.
2- Awesome Flutter Snippets
Awesome Flutter Snippets is a useful tool that offers a large number of ready-made code snippets to speed up coding in Flutter projects. In particular, it enables the quick creation of frequently used structures and widgets, greatly speeding up the coding process and increasing your productivity. This plugin is also great for those who are new to Flutter, as it allows you to quickly build basic building blocks, giving you a better understanding of Flutter’s core components.
Highlights:
Ready Code Snippets:
- It contains predefined code snippets for Flutter’s basic widget constructs, such as StatelessWidget and StatefulWidget. For example, to create a StatelessWidget, you only need to type a few letters. The rest of the code is added automatically.
- The plugin provides snippets not only for basic widgets, but also for commonly used widgets such as ListView, Container, Column, Row. This minimises code writing time when creating page layouts or placing widgets.
- These snippets save time, especially when you need to quickly create repetitive structures in large projects.
Increases Code Writing Speed:
- Instead of writing time-consuming and repetitive code by hand, the quick addition of these structures with Awesome Flutter Snippets allows you to spend more time on other important tasks you need to focus on.
- By increasing the code writing speed, it offers a great advantage especially in prototyping and rapid development stages.
Helps Maintain Code Standards:
- Snippets are prepared in accordance with a specific code standard. This is important to ensure code consistency in the project and to create a more readable code base.
- Especially in team projects, everyone using the same code makes collaboration easier and makes the project more sustainable.
Use Cases:
- Prototype Development: Speed is important when prototyping. This plugin allows you to quickly create the page structure and test the project.
- Common Code Structures: You can gain speed by using snippets instead of rewriting the code of frequently used constructs each time. This significantly speeds up the workflow in large projects.
- For New Learners: For those in the process of learning Flutter, the ready-made snippets provide a great advantage for understanding how the basic structures and widgets work.
3- Flutter Stylizer
It is a tool that allows you to automatically manage the code layout in your projects. Especially in large projects, it is very important to maintain the readability and order of the code. Flutter Stylizer automatically sorts and organises import statements and widgets to maintain this order. This makes your code cleaner and more organised, so it’s more understandable when working on it or sharing it with teammates.
Highlights:
Automatic Import Editing:
- Flutter Stylizer automatically alphabetises the import expressions used in your code files. This ensures that imports in your project are always organised and consistent.
- Detects and automatically removes unused imports. This makes your code clean and efficient, free of unnecessary dependencies.
Widget Editing:
- Widget Sorting: Automatically sorts your widgets according to a specific order. This helps maintain order, especially in large widget trees.
- Organised Structure: Automatically adjusts spacing and alignment between widgets so that your code is always neat and readable.
Suitable for Teamwork:
- In team projects, it is important to keep the code in the same layout and format. Flutter Stylizer is the perfect tool to ensure the same layout across all project files.
- It ensures that all developers within the project follow the same code editing rules, which improves code quality and collaboration in the project.
Use Cases:
- Maintaining Order in Large Projects: Maintaining code order is difficult, especially in large and complex projects. Flutter Stylizer automatically provides this order and keeps your code tidy.
- Teamwork: In team projects, code needs to be written consistently and organised by all members. Flutter Stylizer is an effective tool to ensure this consistency.
- Refactoring and Cleaning: After writing your code, it can be difficult to edit and clean up. Flutter Stylizer makes your job easier by automating this process.
4- Rainbow Brackets 2
It is a handy tool for users to make it easier to keep track of parentheses and brackets when writing code. Especially in complex and nested code structures, it is difficult to see the correct matching of brackets. This plugin improves the readability of your code by visualising pairs of brackets with colours and makes your debugging process easier.
Highlights:
Matching Coloured Brackets:
- Different Colours: Rainbow Brackets 2 paints each pair of brackets in different colours. This visualises which pairs the brackets belong to and makes nested structures more understandable.
- Colour Customisation: The plugin allows you to customise the colours. You can adjust the bracket colours according to your own colour preferences for a better visual appearance.
Ease of Understanding Nested Structures:
- Visualisation: Complex code contains nested parenthesis structures. This plugin allows you to easily see which brackets belong to which blocks by making the colours of each pair of brackets different.
- Debugging: It can be difficult to find parenthesis errors when writing code. This plugin helps you quickly find and fix mismatched parentheses.
Use Cases:
- Visualisation in Complex Code: Especially in code that contains nested structures, seeing the brackets with colours makes it easier to understand which block of code is related to which structure.
- Debugging: If there are parenthesis errors in your code, you can quickly detect and correct these errors thanks to colour matching.
- Code Review and Training: The plugin can be very helpful in the process of reading and reviewing code. In educational code reviews, it can be used to show students how brackets match.
5- Error Lens
Error Lens is a debugging tool for Visual Studio Code (VSCode) that makes errors and warnings more obvious and understandable when writing code. Traditional debugging tools usually show errors and warnings in the right-hand panel, but Error Lens visualises this information directly inside the lines of code, so you can spot and fix errors immediately.
Highlights:
Inline Error and Warning Visualisation:
- Direct Visualisation: Errors and warnings are embedded within lines of code and mark this information in colour. This allows you to see errors immediately when editing or writing your code.
- Colour Highlights: Errors and warnings are made conspicuous by highlighting them in the line background or text colour. This makes it easier to find errors, especially in complex code.
Customisable Colours and Style:
- Colour Customisation: You can customise error and warning colours according to your personal preferences or project standards. The plugin offers the possibility to set a wide range of colours and style options.
- Theme Support: Compatible with different VSCode themes and automatically updates colour options to match your theme.
Effective Debugging:
- Fast Feedback: It allows you to immediately see errors while writing code, which speeds up the debugging process. Instant visibility of errors and warnings makes the resolution process faster and more efficient.
- Code Quality: Immediate recognition of errors improves code quality and helps you resolve potential issues more quickly.
Use Cases:
- Writing and Editing Code: It allows you to get instant error and warning feedback when writing or editing code. This gives you a great advantage in the coding process.
- Debugging: It is an effective tool to quickly find and resolve bugs. When there are errors in your code, this plugin provides you with immediate feedback.
- Improving Code Quality: Thanks to error and warning visualisation, you can improve the quality of your code and detect potential problems in advance.
6- Material Icon Theme
It is a tool developed to give users of Visual Studio Code (VSCode) a more familiar and modern look to files and folders. Especially by using Material Design icons, it improves the visual appearance of files and folders in your projects and makes their organisation more obvious.
Highlights:
Material Design Icons:
- Large Icon Set: The plugin offers a large set of icons designed in accordance with Google’s Material Design guidelines. It gives your files and folders a modern and aesthetic look.
Icons by File Types:
- Icons Specific to File Types: Provides custom icons for different file types. For example, Dart icons for .dart files, JavaScript icons for .js files, and more.
- Folder Icons: Provides custom icons for project folders and subfolders, making your file structure easier to navigate.
Theme Support:
- Dark and Light Themes: The plugin is compatible with both dark and light theme options. The appearance of the icons automatically adapts to the VSCode theme you choose.
- Theme Customisation: Works with different VSCode themes and automatically adjusts icon colours to match the theme.
Advanced Customisation:
- Icon Customisation: The plugin offers the possibility to customise icons for specific file types or folders. This provides a file structure customised to specific project needs.
- Personal Preferences: You can create your own set of icons or modify existing icons to suit your personal preferences.
Use Cases:
- Enhanced Visualisation: It gives files and folders in your projects a more modern and familiar look. This makes the project more aesthetic and user-friendly.
- File Management: By using special icons according to file types, you can better organise and manage your files and folders.
- Team Work: In team projects, a consistent visualisation of files and folders provides better organisation among team members and makes the project more understandable.
7- GitLens
It is a powerful Git extension for Visual Studio Code (VSCode). GitLens provides comprehensive features for developers working with Git and allows you to better understand your code’s version history, changes, and contributors. GitLens goes beyond the basic functionality offered by Git to provide a more in-depth and visual version control experience.
Highlights:
Git Information on the Code:
- Blame Annotations: Adds information next to each line, showing when and by whom that line was last modified. This helps you quickly understand the history and contributors behind the changes made to your code.
- Line History: You can review the past changes of a specific line and see how the line has changed. This is useful for tracking the evolution of a piece of code.
Advanced Visualisations for Git:
- Commit Visualisation: Provides graphs and timelines that visually represent your commits. Commits show the propagation of changes to a project over time.
- Branch and Tag Visualisation: Provides tools to visually represent branches and tags so you can better manage different versions and branches in a project.
Advanced Git Commands:
- Git Commands: Allows you to run Git commands through VSCode’s command palette. In addition to basic commands such as git log, git blame, git diffs, it offers more commands and options with GitLens.
- Commit Tools: Gives you suggestions when writing commit messages and allows you to make commits directly from the plugin.
Interactive Git Tools:
- Repository Dashboard: Provides instant information about the Git status of your project. It shows which files have been modified, which branch you are on, and which commits have been made.
- GitLens Commands: GitLens provides custom commands and tools for a faster and more efficient experience when working with Git.
Use Cases:
- Understanding the History of the Code: You can quickly see who made changes to your code and when they were made. This allows you to understand the evolution and history of the code.
- Debugging: You can review past changes to the code and related commits to understand why bugs and issues are occurring.
- Coordination in Team Projects: Tracking changes and contributions to team projects makes it easier to understand who is doing what on the project. This improves coordination and communication within the team.
Extra Information About GitLens:
- Open Source: GitLens is an open source project and you can contribute to GitLens’ GitHub repository.
- Customisation: GitLens offers many customisation options. You can adjust the plugin’s behaviour and visuals to suit your own workflow.
8- Peacock
It offers Visual Studio Code (VSCode) users the possibility to customise workspaces and windows with colours. This add-on provides visual separation and improves the user experience when quickly switching between different projects or between various development environments.
Highlights:
Colourful Workspaces:
- Workspace Colours: Peacock allows you to assign different colours to each workspace. This makes it easy to visually distinguish which window you are in when working on multiple projects at the same time.
- Personalised Colours: You can choose the colours you want for your workspaces and customise them according to your user needs.
Colour Selection and Management:
- Colour Pickers: You can use built-in colour pickers to easily select and apply colours. You can also customise them by entering colour codes.
- Predefined Colours: You can work with predefined colour palettes, making colour selection quick and easy.
Fast Switching:
- Quick Colour Change: You can quickly change the colours of workspaces. This provides a visually clear distinction when switching between projects.
- Shortcuts: You can use shortcuts to apply specific colours. This allows you to make colour changes quickly.
Use Cases:
- Multiple Project Management: When working on multiple projects at the same time, you can easily distinguish which project you are working on by using different colours for each project.
- Different Workspaces: When keeping multiple workspaces or windows open, you can organise your workflow by assigning different colours to each one.
- Personal Needs: By choosing colours for your own workspaces, you can personalise your work environment and achieve a more productive experience.
9- Flutter Widget Snippets
It provides Visual Studio Code (VSCode) users with quick code writing tools for widgets commonly used in Flutter projects. This plugin makes the Flutter development process more efficient and speeds up code writing.
Highlights:
Ready Code Snippets:
- Basic Widget Snippets: Provides ready-made code snippets for Flutter’s most basic widgets. For example, you can quickly add widgets such as Container, Row, Column, ListView.
- Customisable Snippets: It offers customisable snippets according to the needs of users. You can add your own code snippets and customise existing snippets.
Fast Code Writing:
- Access with Shortcuts: You can use simple shortcuts to create specific widgets. For example, you can quickly add code to create a StatelessWidget with just a few keystrokes.
- Autocomplete: Thanks to the autocomplete features of the code you write using shortcuts, it speeds up the coding process and reduces the possibility of making mistakes.
Use Cases:
- Rapid Prototyping: When creating a new Flutter widget or modifying existing widgets, you can save time by quickly adding code snippets.
- Complex User Interfaces: You can quickly create complex widget structures. For example, you can quickly add more advanced widgets such as ListView.builder or GridView.
- Training and Learning: It can help beginners to learn how to use widgets. It supports the learning process with sample codes and documentation links.
10- Prettier — Code Formatter
It gives Visual Studio Code (VSCode) users the ability to automatically format and edit their code. Prettier is a popular code formatter with support for numerous programming languages and file formats, helping to make your code clean, readable and consistent.
Highlights:
Automatic Formatting:
- Code Formatting: Prettier automatically formats your code. It makes code more readable, limits line lengths and conforms to standards.
- Formatting on Save: Automatically formats your code as you save it, which helps you consistently write clean and organised code.
Configuration Options:
- Configuration Files: You can customise formatting rules with configuration files such as .prettierrc or prettier.config.js. With these files, you can specify settings such as indentation width, line length, quotation style.
- Separate Settings: You can make separate settings for each project. This allows you to manage different formatting standards between projects.
Code Editing and Cleaning:
- Code Correction: Automatically corrects style errors in your code. For example, it cleans up excess whitespace or corrects misplaced parentheses.
- Standards Conformance: Ensures that your code conforms to a specific style guide, which guarantees that the code is consistent and readable.
Integration and Compatibility:
- Integration with Other Plugins: Prettier can integrate with other code quality tools such as ESLint. This allows you to manage both style and quality rules together.
- IDE Support: It can work in various IDEs and editors outside of VSCode. This ensures that your projects remain consistent across various development environments.
Use Cases:
- Consistency of Code: Ensures that code is written consistently across team members. Prettier helps the whole team adhere to the same code style.
- Quick Code Cleanup: You can use it to quickly make your code clean and organised. This makes it easier to read and understand your code.
- Automatic Formatting: When writing code, you can work without worrying about whether you follow style rules. Prettier does formatting automatically, so you don’t have to constantly check the code style.
- Prettier CLI: Prettier can also be run from the command line. This is useful for integration with different tools and automatic formatting.
I hope you found this article useful! If you appreciate the information provided, you have the option to support me by Buying Me A Coffee! Your gesture would be greatly appreciated!
These plugins speed up the overall development process, improve workflow and increase code quality in Flutter projects. Especially in large projects and teamwork, these tools can be life-savers.
Thanks for reading.
Selin
Hiç yorum yok:
Yorum Gönder