TSLint Config in VS Code - visual-studio-code

I'm trying to configure the max line length (among other settings) for TS Lint in VS code but no matter what changes I make it doesn't 'take'.
So, the first strange thing is that VS code's TS Lint error for max line length says I've exceeded the 140 character limit but in the various config files I've found it only ever mentions 120 characters as the default.
I've changed this to 200 characters, disabled / enabled the extension but still get the 140 character warning. Does anyone know where and how to configure this setting? The documentation online is clear enough but I don't appear to have a tslint.json file and within the node_modules => tslint => lib => rules folder the setting is 120 and changing it makes no difference.

Edit 2020-09-30
Microsoft deprectaded the old plugin and released a newer, completely rewritten version with additional features here.
For the new plugin the setting "tslint.enable": true does not exists and is not needed anymore.
Original Answer
You need to create a tslint.json (in your workspace root) and set something like this to disable the maximum line length:
{
"defaultSeverity": "error",
"extends": [
"tslint:recommended"
],
"jsRules": {},
"rules": {
"max-line-length": [false]
},
"rulesDirectory": []
}
Furthermore, ensure that the following options are set in the in the vscode user settings (settings.json):
"tslint.configFile": "./path/to/tslint/relative/from/workspaceroot/tslint.json",
"tslint.enable": true
The tslint.configFile option can be empty if the file is in the root directory of your workspace.
Further rules can be found here.

Related

Eslint prettier error on new line incomprehensible

I have and error of eslint in my code that I cannot understand how turn off, these are some examples:
As you can see there is a eslint(prettier/prettier) rule that is incomprehensible and I can't understand how to turn off.
This is my eslint and prettier config:
eslint
module.exports = {
root: true,
extends: ['#react-native-community'],
parser: '#typescript-eslint/parser',
plugins: ['#typescript-eslint'],
overrides: [
{
files: ['*.ts', '*.tsx'],
rules: {
'#typescript-eslint/no-shadow': ['error'],
'no-shadow': 'off',
'no-undef': 'off',
},
},
],
};
prettier
module.exports = {
printWidth: 100,
arrowParens: 'avoid',
bracketSameLine: false,
singleQuote: true,
tabWidth: 2
};
Oh Pierro... Its you again.
Your Prettier configuration is not in sync with your ESLint configuration.
When you set Prettier's print-width rule, you need to always make sure that you set ESLint's max-len rule to the same value. This is very import, and is likely causing your issue. You seem to have some other stuff going on though.
#see this post
You need to synchronize the two. Ir looks like a JSX configuration that's causing problems. Try changing the value of bracketSameLine in your prettier configuration to true, or try getting rid of it all together.
You see where it says that the rule prettier/prettier is causing the issue? That should be in your configuration.
That's odd... You don't seem to have your .eslintrc.* file configured properly. It looks like your not properly configuring the eslint-plugin-prettier plugin for ESLint.
If you look at the plugin's documentation, which is where the prettier/prettier rule comes from (the first prettier is the name if the plugin, the second prettier is the name of the rule) it says you need to add the following values to the correct settings in your .eslintrc.* configuration file.
{
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}
Its odd that the prettier/prettier rule shows up at all without you having added that configuration.
#see this answer here, it thoroughly explains what the prettier/prettier rule is.
The if the prettier config file is not present, the auto-formatting properties of vscode are taken as the default. the settings.json in the .vscode settings should be in sync with the linter properties. In your case you don't have prettier configured thats why the error is being thrown from prettier/prettier

How do I enable spread operator with plugin-proposal-object-rest-spread in Babel 7?

I'm trying to enable the spread operator in my project using Babel, but since Babel has remove stage presets I'm having no luck getting spread operators to work with: https://www.npmjs.com/package/#babel/plugin-proposal-object-rest-spread
I've installed plugin-proposal-object-rest-spread and added it to my .babelrc:
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-proposal-object-rest-spread"
]
}
But I'm still getting the following error:
Support for the experimental syntax 'objectRestSpread' isn't currently enabled
(28:3):
26 | onClick,
27 | text,
> 28 | ...allProps
| ^
29 | }) => {
30 | let Element = isStatic ? 'span' : renderAs;
31 | const props = modifiers.clean(allProps);
Add #babel/plugin-proposal-object-rest-spread (https://git.io/vb4Ss) to the 'plugins' section of your Babel config to enable transformation.
It suggests I add #babel/plugin-proposal-object-rest-spread. I have, it's in my package.json.
Any ideas?
NOTE: I'm using Quasar framework, so my instructions may be very slightly different, but is mostly the same.
For the others like me who were spending hours on this issue that shouldn't have been in the first place, here's how I solved it:
Go to your directory where you currently have your .babelrc file.
Create a file called babel.config.js and add the following contents:
module.exports = {
"plugins": [
"#babel/plugin-proposal-object-rest-spread"
]
}
Now, do an npm install #babel/plugin-proposal-object-rest-spread --save-dev
Reload your server, running project. It should work now.
In my case, I didn't touch my .babelrc but just left it as it is and added the new config file. But others have had luck just copy pasting all the content in .babelrc into babel.config.js
Just my $0.02, (mods you can probably delete this part):
Honestly, Babel has become a can of worms. I don't understand why they constantly need to keep screwing up perfectly working implementations. I wish we'd be in a future where won't need to touch this time sink as anything wrong with Babel causes atleast 2 hours on average to fix.

How do I get flake8 to reliably ignore rules in VS Code?

Two things that annoy me. First is the warning Flake8 gives me when I type more than 80 characters on a line. Second is the warnings I get when I haven't yet used a module name that I imported. I've looked at all the documentation on using Flake8 in the terminal. No use.
flake8 --ignore=E402
flake8 --max-line-length=120
This doesn't work. At least VS Code doesn't show any effect.
Add your arguments to your USER SETTINGS json file like this:
"python.linting.flake8Args": [
"--max-line-length=120",
"--ignore=E402,F841,F401,E302,E305",
],
note that flake8 uses
"python.linting.flake8Args": [
whereas black seems to use:
"python.formatting.blackArgs": [
if you're using both (or toggling) these settings maybe helpful:
{
"python.linting.pylintEnabled": false,
"python.linting.flake8Enabled": true,
"python.linting.enabled": true,
"python.formatting.provider": "black",
"python.formatting.blackArgs": [
"--line-length",
"120"
],
"python.linting.flake8Args": [
"--max-line-length=120",
"--ignore=E402",
],
"python.pythonPath": "venv/bin/python"
}
In my case (vscode 1.72.2, flake 5.0.4) it only worked by adding:
"flake8.args": [
"--max-line-length=120"
]
in the settings.json
I prefer editing the Workspace settings, namely <root project folder>/.vscode/settings.json, because I store it in version control. This way it is backed up and everyone working on the project will get it.
What was suggested in most of the other answers:
"python.linting.flake8Args": [
"--max-line-length=120",
],
had no effect for me.
I ran into this problem recently. I ran into problems because I was setting the argument to --config flake8.cfg instead of --config=flake8.cfg. Under the hood, vscode puts the CLI argument in quotes. Adding "--config flake8.cfg" to the flake8 command seems to confuse flake8 into thinking that it's looking at a file path and not a CLI argument.
The solution for me was to either set the args as --config=flake8.cfg (with the equals sign) or the args up into separate items in the array:
"python.linting.flake8Args": [
"--config",
"flake8.cfg"
]
The solution proposed by reka18 is great and was no doubt written specifically for the original question.
From a more general stand point, I would advise against using this kind of trick
if you work on a project that has dedicated configuration files.
You are guaranteed to run into incomprehensible configuration conflicts
and will possibly ignore rules that were purposefully enforced by the project.
In this case, you should use the following instead:
assuming the file is named .flake8 and is present at the project's root folder
// .vscode/settings.json
"python.linting.flake8Args": ["--config", ".flake8"],
Using --config .flake8 ensures only this file will be read (See official doc).
So it is important to use this option, even though it is a default value. Otherwise, a custom user configuration in a parent folder could accidentally be used.
To extend (change) the default Flake8 line length I added the following in my VS Code workspace: project.code-workspace:
{
...
"settings": {
"flake8.args": [
"--max-line-length=120",
]
}
}

Need help to complete installation of linter-stylelint for Atom

I am really sorry for this newbie question but I can't see how solve that...
I installed linter-stylelint and tried to configure it like it's said there:
https://atom.io/packages/linter-stylelint
So:
- I placed a stylelint.config.js file in my project.
- In the settings, I checked Use standard
- But can't see what I have to do to "Add a stylelint section in your package.json"
On my Mac I see the file:
/Users/eric/node_modules/stylelint-config-standard
But I don't know what code do I have to insert inside...
By the way, when I try to use linter-stylelint in a css file I get the error message:
Unable to parse stylelint configuration
Unexpected token :
In my stylelint.config.js, I have the following code for now:
{
"extends": "stylelint-config-standard"
"rules" {
"no-unsupported-browser-features": [ true, { "severity": "warning" }]
}
}
Thanks if you can help me!
;)
Paul
So: - I placed a stylelint.config.js file in my project. - In the settings, I checked Use standard
According to the docs you reference, you should either place a stylelint.config.js file or check "Use standard".
I get the error message Unable to parse stylelint configuration Unexpected token :
This is because the JSON of your configuration file is invalid. It is missing both a comma and a colon. Use a service like JSONLint to validate JSON. Your fixed config is:
{
"extends": "stylelint-config-standard",
"rules": {
"no-unsupported-browser-features": [true, {
"severity": "warning"
}]
}
}
Even though this config is valid JSON, it won't work because the no-unsupported-browser-features rule is no longer built into stylelint. It is, however, available as a plugin. You'll need to follow the plugin's instructions if you wish to use it.
I am really sorry for this newbie question
It's fine. We are all newbies in the beginning! As you're just getting started with stylelint, I suggest you remove the stylelint.config.js file and ensure the "Use Standard" box is checked. This is likely the quickest way to get going. Once you are more comfortable with the tool, you can investigate creating your own configuration file for your specific needs.

Visual Studio Code Run On Save Extension not running

I installed the Run On Save extension for VS Code. I made a Workspace setting for it, and if I change a file then resave, it does not seem to run. "I run for all files" does not show up in the console or terminal.
When I chose to edit the command configuration in my Workspace settings, it automatically edited the file with the comment "Place your settings in this file to overwrite default and user settings." so it looks like this:
// Place your settings in this file to overwrite default and user settings.
{
"editor.mouseWheelZoom": false,
"emeraldwalk.runonsave": {
"commands": [
{
"match": ".*",
"isAsync": true,
"cmd": "echo 'I run for all files'"
}
]
}
}
I'm new to configuring Workspace settings, so I'm not sure if this is okay or not. I ensured that Run On Save is enabled by selecting it on the command palette.
Here is the site for the extension: https://marketplace.visualstudio.com/items?itemName=emeraldwalk.RunOnSave
In order to see the console output, you have to be in the Output tab and select the Run On Save option in the dropdown. The extension was created before the integrated terminal existed and hasn't seen a major update in a while.
Regarding the comment that was added to your config:
// Place your settings in this file to overwrite default and user
settings.
is unrelated to this particular extension. It is just vscode letting you know the purpose of the workspace level configuration. It allows you to override a subset of your more global user / default settings. This allows you to keep reasonable default preferences but to customize certain specific things in any given workspace.
Regarding the original RunOnSave extension, feel free to file an issue here https://github.com/emeraldwalk/vscode-runonsave/issues if you have any questions or problems. I would also welcome pull requests if anyone is interested.
I had the exact same issue. I removed that extension and am using this one instead:
https://marketplace.visualstudio.com/items?itemName=wk-j.save-and-run
It is a fork based on RunOnSave. This one works for me when I set its configuration in my user settings and then run the command "Save and Run: Enable".
This one uses the bulit-in powershell terminal.
HTH
In addition to our dear #bingles, I have accidentally discovered that the commands should be added to .vscode/settings.json file instead of .vscode/emeraldwalk.runonsave as said in the plugin documentation
Add it to settings.json and everything should work as expected.
For the extension to work on Workspace you must put the emeraldwalk.runonsave inside settings:
{
"settings": {
"emeraldwalk.runonsave": {
"commands": [
{
"match": ".*",
"isAsync": true,
"cmd": "echo 'I run for all files'"
}
]
}
}
}
A related one:
Previously I used RunOnSave, this time around I used Code Runner.
Code Runner - https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner
Below are it's settings I used:
File: %AppData%\Code\User\keybindings.json
{
{
"key": "ctrl+s",
"command": "code-runner.run"
}
}
File: .vscode\settings.json
{
"code-runner.saveFileBeforeRun": true,
"editor.codeActionsOnSave": [
"code-runner.executorMap"
]
"code-runner.executorMap": {
"javascript": "node a.js"
},
}
If possible, you could use Code Runner with the above settings, or use a similar to the above settings for the RunOnSave.
Note that RunOnSave has its own tab which is time-consuming to switch to another tab.
With Code Runner I can see the output in the Output tab itself which is a very nice thing, saves time.