I have Visual Studio Enterprise 2017 with Eslint enabled in the Options. When I rebuild the solution, eslint won't show any errors. I intentionally wrote some broken javascript to test, but it won't show in the VS errors/warnings list.
var x = 3;
if (x == 3) { y = 6 }
If I run eslint from the command line it throws an error because of the above statement violating the eqeqeq rule, but it won't in VS 2017.
Here is my .eslintrc
{
"parserOptions": {
"parser": "babel-eslint",
"sourceType": "module"
},
"env": {
"amd": true,
"browser": true,
"jquery": true,
"node": true,
"es6": true,
"worker": true
},
"rules": {
"eqeqeq": 1
}
}
Also if this is any help under the Options > Web > Code Analysis, I have Clean Errors On Build: True, Ignore Nested Files: False, and Ignore Patterns: "".
In order to leverage a project level .eslinterc file, you have to reference your visual studio "global" level .eslintrc inside your project level .eslintrc using the "extends": property.
docs: https://eslint.org/docs/user-guide/configuring#using-a-configuration-file
how to get to your vs global .eslintrc config: ESLint support Visual studio 2017
ESLint in VS2017 seems to be outdated, so it isn't able to process .eslintrc files in solution root. My current solution to this problem is to use VisualLinter extension which shows warnings/errors in the Error List as expected from built-in ESLint.
Related
I am new in svelte. I trying to add ESLint to my svelte project.
My eslintrc.json:
{
"env": {
"es6": true,
"browser": true,
"node": true
},
"extends": [
"standard", "airbnb-base/legacy"
],
"plugins": [
"svelte3"
],
"overrides": [
{
"files": ["**/*.svelte"],
"processor": "svelte3/svelte3"
}
],
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 2019,
"sourceType": "module"
}
}
It works, but linter rules does not support sass syntax. I have this error.
How can I fix it?
If you're using some sort of preprocessor on the component styles, then it's likely that when this plugin calls the Svelte compiler on your component, it will throw an exception. In a perfect world, this plugin would be able to apply the preprocessor to the component and then use source maps to translate any warnings back to the original source. In the current reality, however, you can instead simply disregard styles written in anything other than standard CSS. You won't get warnings about the styles from the linter, but your application will still use them (of course) and compiler warnings will still appear in your build logs.
This setting can be given a function that accepts an object of attributes on a tag (like that passed to a Svelte preprocessor) and returns whether to ignore the style block for the purposes of linting.
The default is to not ignore any styles.
settings: {
'svelte3/ignore-styles': () => true
}
I faced the same issue and there is no documentation on how to use the svelte3/ignore-styles in settings to ignore the styles in eslint. Here is how i fixed the issue -
I Changed .eslintrc to .eslintrc.js in order to use the ignore rule as a function -
module.exports = {
...
"rules" : {
},
"settings": {
"svelte3/ignore-styles": () => true
}
}
I can post my whole config and JavaScript file if needed, but I am trying to run ESLint on some JavaScript I'm writing.
My 'eslintrc.json' file has this in the config (with some other rules):
"rules":
{
// Thought this was my issue and hoped it would solve it.
"env":
{
"es6": true
},
"prefer-template": "error", //template literals
"quotes":
[
"error",
"double",
{ "avoidEscape": true, "allowTemplateLiterals": true }
]
}
Here is the error code that spits out in the .log file for ESLint, and the code it is failing at.
Parsing error: Unexpected character '`' FolderName\FileName.js:31:17
function Something()
{
// Seperated to try and debug the issue.
var message = `Starting Something: ${ arguments.callee.name}`;
// ^
Log.Message(message);
SomeOtherFile.UpdateEnvironmentVariables();
}
I know by default ESLint uses ECMAScript 5 (Specifying Parser Options) so I tried setting it to ECMA 6 (that has template strings - See above config file), but that didn't seem to help.
What's weird is that the ESLint documentation (rule : quotes) explains backticks and mentions that it is only in ECMAScript 6, etc.. But it seems like the parser that ESLint uses (Espree - On ESLint) is having an issue or something.
I really don't want to go through and replace all of these with some string concatenations, any suggestions?
Your code lints as written on eslint.org/demo when ECMA Version 2015 is set. Well, there are errors, but they aren't the template literal usage.
What this tells me is that you're running into a parsing error, not a linting error and need to set your parser settings.
Parsing error when ECMA Version set to 5
Parse is fine and you have LINTING errors when ECMA is 2015
Solution
To fix this, I think you have to provide an .eslintrc file somewhere that sets parser options to es2015 or later.
Double-check and try changing what's in yours to include this:
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "script",
"ecmaFeatures": {}
}
So even if your file includes the comment at the top...
/*eslint-env es6 */
... the parser options will win out and kill the template literal. And, as you show, your error is a parsing error, not a linting one:
Parsing error: Unexpected character '`' FolderName\FileName.js:31:17
I will readily admit that's a very confusing distinction. I didn't figure it out until banging my head on this answer for a while, but it explains why my env settings in my files don't always seem to "take"; the parser options override them.
In .eslintrc.json, I used babel-eslint and installed babel-eslint as devDependency in package.json. Hope that works for you too
.eslintrc.json file
{
"env": {...},
"parser": "babel-eslint",
"parserOptions": {...}
}
Edit 1:
babel-eslint is archived and it is suggested to use #babel/eslint-parser.
More info below
babel eslint
#babel/eslint-parser
{
"env": {...},
"parser": "#babel/eslint-parser",
"parserOptions": {...}
}
Edit 2:
#babel/eslint-parser needs #babel-core installed. If you are not already using #babel, then its best to upgrade your eslint to 7.5 and above. Here is the link to similar question:
Background
I just get into learning react.js, and find out a lot people are using prettier and eslint to format their code. But after I setup my own based on the online guides, wired things happened. It can format code correctly when I'm saving the file, but not when I manually trigger format function (Shift+option+F). It will format the file to a wired way that eslint will give me errors.
Here's the vscode settings that I'm using:
"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": false
},
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
"prettier.disableLanguages": [
"js"
],
"editor.detectIndentation": true,
"editor.tabSize": 2,
and I also have a .eslintrc file
{
"extends": ["react-app", "plugin:prettier/recommended"],
}
and a .prettierrc file
{
"trailingComma": "es5",
"tabWidth": 2,
"semi": true,
"singleQuote": true,
"jsxBracketSameLine": true
}
What I assume here is the vscode keyboard shorcut(Shift+option+F) is not using the same configuration (or even not the same tool) as autoFixOnSave.
But also I don't understand how these tools work and integrated together, and which one overrides which one. Can some one help?
Why are you disabling js for prettier?
Do you know Prettier can be integrated flawlessly with ESLint?
Take a look at this article: Prettier: Integrating with ESLint
In your user/workspace settings, just add:
"files.autoSave": "off",
"editor.formatOnSave": true,
"eslint.autoFixOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll": true,
"source.organizeImports": true
},
"eslint.options": {
"extensions": [".js", ".jsx"]
},
"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
Also it is recommended having a .editorconfig in your root folder:
# http://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = crlf
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
max_line_length = off
trim_trailing_whitespace = false
And finally, in your .eslintrc file, add:
"extends": ["react-app", "plugin:prettier/recommended", "prettier/react"],
Check out the eslint-plugin-react for validating react.
I am not looking at the mac version of VS code, but I think that hotkey is supposed to be Shift + Option + F
Edit: I usually disable the default javascript formatter in vscode, because it can conflict with my eslint rules, which makes it impossible for eslint to properly format my code.
ESLint has it's own Fix command which does not have a hotkey on my setup, but I have eslint.autoFixOnSave: true.
Prettier does not hook into the internal vscode format command. It also has it's own command set up. The default hotkey to run prettier format for the majority of the available prettier extensions is CMD + Shift + P -> Format Document but will trigger on save if editor.formatOnSave is true.
One of the main features of StandardJS is that it doesn't require configuration.
The problem is that I want to configure it. I don't want to put:
/* eslint-env mocha */
...in every test file. I want to configure StandardJS to treat everything in the test directory as mocha tests.
I've found in the README that some configuration is possible, e.g.:
{
"standard": {
"globals": [ "myVar1", "myVar2" ]
}
}
...but I'm struggling to find more comprehensive documentation about the configuration options. Is it possible to configure StandardJS to treat files in different directories differently?
You have a couple of options to try out and see what works for your specific project depending on the recent implementation of StandardJS.
Define your own globals
in package.json:
"standard": {
"globals": [
"describe",
"before",
"after",
"beforeEach",
"afterEach",
"it",
"assert"
]
}
or in .eslintrc:
{
"globals": {
"describe": false,
"before": false,
"after": false,
"beforeEach": false,
"afterEach": false,
"it": false,
"assert": false
}
}
More on ESLint's configuration.
Define an environment
in package.json:
"standard": {
"env": {
"mocha": true
}
}
or in .eslintrc:
{
"env": {
"mocha": true
}
}
Check out currently available environments
Run StandardJS as an NPM script with the environment specified
in package.json:
{
"scripts": {
"lint": "standard --env mocha"
}
}
Use a plugin
after installing the plugin (e.g. eslint-plugin-mocha)
in package.json:
"standard": {
"plugins": [
"mocha"
]
}
or in .eslintrc:
{
"plugins": [
"mocha"
]
}
Create your own, customized rules based on StandardJS
Check out this repository. The quick rundown:
Install with:
npm install --save-dev eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node
Then create a .eslintrc file by extending StandardJS and start to fill with your own rules:
{
"extends": "standard"
}
Since StandardJS uses ESLint under the hood, you can pretty much configure it however you want it using ESLint's documentation.
How to use Visual Studio code to lint JavaScript file based on babel/ES7 stage-0 rules?
I only need to lint code. I already have webpack transpiling Js file.
How I proceed:
install globally eslint : npm install -g eslint
install babel-eslint : npm install --save-dev babel-eslint
install eslint-plugin-react : npm install --save-dev eslint-plugin-react
create .eslintrc file in you root directory. here is my config:
{
"env": {
"browser": true,
"node": true,
"es6": true,
"jest": true,
"jquery": true
},
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"arrowFunctions": true,
"binaryLiterals": true,
"blockBindings": true,
"classes": true,
"defaultParams": true,
"destructuring": true,
"forOf": true,
"generators": true,
"modules": true,
"objectLiteralComputedProperties": true,
"objectLiteralDuplicateProperties": true,
"objectLiteralShorthandMethods": true,
"objectLiteralShorthandProperties": true,
"octalLiterals": true,
"regexUFlag": true,
"regexYFlag": true,
"spread": true,
"superInFunctions": true,
"templateStrings": true,
"unicodeCodePointEscapes": true,
"globalReturn": true,
"jsx": true,
"experimentalObjectRestSpread": true
}
},
"plugins": [
"react"
],
"rules": {
"strict": 0
}
}
In VSC, push F1, then write "extension", select "install extensions" and then, write "eslint" and validate. you will have to relaunch VSC
In VSC code, open the user parameters (settings.json) and write:
{
//disable default javascript validator replaced by eslint
"javascript.validate.enable" : false
}
Now, it should lint as wanted your ES7 code. If there is any issue with VSC reading eslint config, you can see it in the VSC console (Ctrls
ShiftU).
As a result, ES7 code (spread operator in objects for example) is well linted:
PS: may be my .eslintrc uses some useless extra data for ES7 linting so feel free to remove it :)
Since the ESLint extension can use babel-eslint, install it and turn off vscode's built-in linting in user/workspace settings.
Here's an example setup using Create React App's eslint config + optional chaining:
.vscode/settings.json:
{
"javascript.validate.enable": false,
"eslint.enable": true
}
.eslintrc:
{
"extends": "react-app"
"parser": "babel-eslint",
}
.babelrc:
{
"plugins": ["#babel/plugin-proposal-optional-chaining"]
}
Here's all the npm packages to install for this setup:
npm install --save-dev eslint-config-react-app babel-eslint#10.x #typescript-eslint/eslint-plugin #typescript-eslint/parser eslint#5.x eslint-plugin-flowtype#2.x eslint-plugin-import#2.x eslint-plugin-jsx-a11y#6.x eslint-plugin-react#7.x eslint-plugin-react-hooks#1.5.0 #babel/core #babel/plugin-proposal-optional-chaining
For those new to React or babel, unless you actually are using Create React App, you'll need a lot more babel config. Please only use the above as supplementary info and comment if you need help.