VS Code - Line in the middle of the screen - flutter

I'm a big fan of VS Code and i'm just learning to code. But when using dart language, there is a line in the middle of my screen the-line!!!. I don't have this trouble in html, css or any other language. I updated my graphics cards. What do you think could be the problem?
thanks

This isn't an issue with your graphics card. This is a Dart setting when you install the plugin via VS Code. You should be able to modify/remove this 'line' within the settings. It appears there is a fix here. The line is simply a formatting suggestion to where you are recommended to 'break' your code or start a new line.

Steps on getting rid of the line:
Go to your vs code and press on dart in the bottom of your screen
https://i.stack.imgur.com/hEH82.png
Then click on "Configure 'dart' language based settings..." https://i.stack.imgur.com/gWMua.png
Find the line that says "editor.rulers": [80] and change the value to what ever you want or delete the "editor.rulers" line to get rid of that huge line on your vs code screen
https://i.stack.imgur.com/Haass.png

Related

Is there a way to remove this feature on vscode?

Recently whenever I am coding specifically in Java and have a line of code like sysout, I keep getting the data type or variable before the actual code. Unable to backspace it as it seems to be an overlay without doing anything to the code. I've never had this picky issue before and am unsure if its been implented through vs code or its an extension I have. If anyone knows how I could get rid of the "x: " in line 4 of the image below then that would be great.
Thank you
Line 4 of code
This is a new vscode feature and has nothing to do with Java or any extensions. To get rid of it, put the following in your settings.json:
"editor.inlayHints.enabled": false
To open your settings.json, open the command palette and search for “settings” and click on Open user settings (JSON).

Build a code editor with syntax highlighter using TextField in Flutter

I am trying to build Code Editor in Flutter app using TextField, I tried using flutter_syntax_view but the problem is, it only accept code as a predefined string text and it does not have any option to write a code.
This is what I have tried:
Used TextField with maxLines 10
If we can show number of lines on left like code editor
Open for suggestions, appreciate the help
See my work on github:
http://github.com/icedman/flutter_editor
It uses flutter_highlight, multicursor edits, minimap, line number gutter. Under development - you may want to contribute to that project.
I also wrote an article on creating an editor under 1000 lines of code in Flutter - wherein i explained why i ditched the textfield and made my own widget:
https://levelup.gitconnected.com/build-a-text-editor-with-flutter-ui-under-1000-lines-of-code-5a9dd2a053da

How to prevent Visual Studio Code Flutter/Dart Editor from formatting new line/wrapping code?

I recently started working on Flutter/Dart, I like the flutter autoformatting on-save, but one thing might or might not be related is the code wrapping for long code even if code is still fitting my 4k editor window.
Is there a way to prevent new line but keep the comma auto format?
Thanks
Follow the instructions below:
Open Settings.
Expand Extensions and click Dart & Flutter on the left.
Find Dart: Line Length.
Change it to the value you want.

Flutter - Is there a way to see which line of the code throws an error?

I am new to Flutter. So sorry if my question is silly...
In Flutter is there a way to see which line throws an error?
E.g. I have this in console.
And this in the stimulator.
Can I understand from it which line throws it?
You can see the line of code that has error in your screenshot bro, all you need to do is read it and we can see that the error is in #1.
it says that you story.dart has error on line 200
Using the console
See all the files in blue on the console? They represent all files (yours and those from the Flutter SDK and libraries) connected to the error message.
There is a high chance that the line that throws an/the error is not from the libraries but from your own code. So, what do you have to do?
Scan all files in blue that are from your own code and look for the one that has the strongest relationship with the error message.
For example, in your case, story.dart is your own code. Ctrl + click on story.dart files in blue to see the line that may have caused the error/exception. In your case, there is a high chance that you are trying to read or delete an element from an empty list.
You can also use the VSCode debugger to do this
I have had the same problem: VSCode opening flutter source files and pointing to an exception in them, instead of in mi code. After reading #user2740650 comment, a looked carefully to the bottom bar, and discovered the Debug my code + packages + SDK text in it.
Screen capture of bottom bar in VSCode
I clicked on it and switched to Debug my code, and my problem was solved!

Is there a way to improve linting errors highlight in Visual Studio Code?

Currently eslint/tslint highlighting for issues/errors is super invisible (comparing, for example, to Atom). Its almost impossible to catch the issue - find the small green highlight zone (see screenshot)
VSCode:
Atom:
Question is not relevant since June 2018 (VSCode now has awesome highlights)
Simple. I use 2 extensions for that:
Error Lens (usernamehw.errorlens) for highlight the entire line and show on real time the error diagnostic
Error Gutters (igorsbitnev.error-gutters) for put error icons next of line number
Both look like this:
For those who would like a partial solution for this you can actually open up the console in vscode on the PROBLEMS tab to display all errors on across your application grouped by file.
I would prefer the inline visualised approach, but this does resolve this problem more or less.
To open the PROBLEMS tab, click CMD+Shift+M on Mac.
Not sure about windows.