Related
I am using ESLint in my Vue(Nuxt) project in VSCode. When I save I would like my ESLint to run automatically and fix all the warnings for me automatically.
This is my settings.json file in VSCode:
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.validation.template": false,
"vetur.completion.scaffoldSnippetSources": {},
"vetur.completion.useScaffoldSnippets": false,
"vetur.format.defaultFormatter.html": "none",
"workbench.iconTheme": "material-icon-theme",
"git.autofetch": true,
"git.defaultCloneDirectory": "",
"gitlens.views.repositories.files.layout": "list",
"editor.tabSize": 2,
"editor.detectIndentation": false,
}
And this is my .eslintrc.js file:
module.exports = {
root: true,
env: {
browser: true,
node: true,
},
extends: [
"#nuxtjs",
"plugin:nuxt/recommended",
"../.eslintrc.js"
],
rules: {
//Add custom rules for the frontend here.
//Rules that are common for shared, frontend and backend should go in the parent file
"nuxt/no-cjs-in-config": "off",
},
}
The linked ../.eslintrc.js file contains the following:
module.exports = {
parserOptions: {
parser: 'babel-eslint',
},
plugins: ['jest'],
rules: {
'prefer-const': 'off',
'comma-dangle': ['error', 'always-multiline'],
'prefer-template': 'error',
},
env: {
'jest/globals': true
}
}
Whenever I save the file the warnings just show up and will not automatically fix themselves.
EDIT:
I've turned on verbose output and i'm seeing this in the output:
(node:6832) UnhandledPromiseRejectionWarning: Error: Failed to load plugin 'import' declared in 'frontend\.eslintrc.js » #nuxtjs/eslint-config': Cannot find module 'eslint-plugin-import'
Require stack:
I've then ran yarn add eslint-plugin-import and tried again, it still returns the same error.
Get eslint plugin, add this code to your settings.json
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": ["javascript"]
}
source
Launch VSCode,
Command + Shift + P, type settings and hit enter, paste and save the following:
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
}
}
You're good to go!
I've managed to fix the issue.
The problem was that there were multiple working directories in my solution, which all have their own eslint config.
Putting the following line in the settings.json file of VSCode solved my issue:
"eslint.workingDirectories": [{ "mode": "auto" }]
I tried those solutions and others, and it still didn't work. Actually it was just that ESLint's use had to be approved for use in VSCode. That is, I clicked on the ESLint item on the editor's bottom bar:
Which opened a popup asking me to approve ESLint. After approval autocorrect was running as expected.
Install ESLint extension from the VSCode marketplace.
Once the ESLint extension has installed you may use CTRL + SHIFT + P to open the Command Palette. Search “ESLint fix all auto-fixable Problems” and press enter.
This command would enable eslint to fix the file on save.
In the snap above as you can see that I am getting eslint errors and just to inform you all that despite saving the file, all auto-fixable problems are were not getting fixed by eslint/prettier setup.
So I tried pressing ctrl+shift+p and selecting prettier as default formatter and also tried doing eslint restart server but that didn't worked.
I noticed that vscode was giving me some notifications at the bottom right corner (bell icon). I clicked on that and some list of pop up came up stating that there are multiple formatters installed for the same extension file. Like for example in the below snap there is .jsx file(it had two formatters one was prettier and other was vscodes inbuilt formatter). I clicked on configure button and selected prettier as default and when I saved the file it worked!
If this doesn't works for you then I think this all worked for me because I had eslint npm packages installed in my project that works with prettier to enforce the prettier rules. (these packages are eslint-config-prettier and eslint-plugin-prettier)
I ran into a similar problem-- ESLint was not properly formatting only certain, seemingly random, files on save. Running ESLint --fix would fix the formatting errors, but saving would not. Adding this line to our workspace settings.json fixed the problem:
"eslint.format.enable": true,
Making all our formatter settings look like this:
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll": true
},
"eslint.format.enable": true,
You can also go into the ESLint extension settings and check off the checkbox labeled ESLint > Format:Enable. Worked like a charm!
What fixed it for me was adding this to settings.json, because VSCode didn't know what formatter I wanted to be used on save:
"[javascript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
Check if in the settings.json there are other formatters enabled, in my case I had this by mistake.
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"}
After getting the Eslint plugin you need to add this line to the settings.json:
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
}
Still not working? check if your eslint works fine by running this in the terminal:
eslint --ext \".js,.vue\" --ignore-path .gitignore .
If it failed with exit code 2 try removing node modules and install again.
After running this command you should see the eslint errors.
I was dealing with the same issue, and nothing seemed to help, even though I did all the configurations correctly, and ESLint was marking the problems in my files correctly.
For me the solution was to move the .vscode folder to the project root.
Now everything works as intended.
I have no clue what's going on,
I cloned a github repo and literally just tried to change like one line but I got hit by this prettier error which makes no sense to me (I've never used prettier).
Replace ↹return·(⏎↹↹<img·alt='logo'·src='./Logo.png'·/>⏎↹); with ··return·<img·alt="logo"·src="./Logo.png"·/> prettier/prettier
Anything could be helpful at this point, I'm using MacOS and working on VSCode
I had the same issue, in the eslinrc.json file under "prettier/prettier", I removed printWidth.
Let's see why we are getting this error.
If you have installed the prettier extension in your VSCode then the default values are set as mentioned here which can be seen by searching prettier in the settings of VSCode as well.
Now if you have enabled formatOnSave in your VSCode the prettier formats your code based on configs from the VSCode.
This error would occur when the configs from the VSCode conflicts from the configs mentioned in .prettierrc.json or .eslintrc.json.
Ex: Let's say your project is using a printWidth of 100 but the default printWidth is 80. ( Search prettier printwidth in VSCode settings )
In general the spacing errors will be autoCleared ( autoFormatted ) on save by prettier. But in this case that won't work.
Reason: Prettier is sticking to the config ( printWidth: 80 ) which is an error according to Repo's eslintrc/ prettierrc ( printWidth: 100 )
Fix here
Change default VSCode Prettier configs. ❌ -> This would be a bad idea as it will effect all your projects opened in VSCode.
Better way to fix this issue is by adding a .vscode/settings.json in the root directory of the repo.
Add these lines in the settings.json
{
"editor.codeActionsOnSave": { "source.fixAll": true },
"editor.formatOnSave": false,
}
Now go to files with errors and save the files to format. Files will be formatted according to the configs mentioned in project's eslintrc/ prettierrc
Instead of going to each file you can fix all autofixable problems from the command line as below.
Go to package.json and add this line to your scripts.
"lint-fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx,json,css,scss,md}'",
Now in the terminal run npm run lint-fix.
This is usually due to some configuration with eslint preventing you from making errors and introducing unwanted characters in your code. I fixed this by running one line eslint --fix . . Make sure you install eslint globally first npm i -g eslint .
I think this is caused by Prettier being configured to use spaces instead of tabs to indent and then your code editor using tabs. So Prettier wants you to replace those tabs with spaces.
Alternatively, you can set your code editor to use tabs.
What worked for me was adding this to the rules object in .prettierrc:
{
"useTabs": false
}
You can just set/update this rule in your .eslintrc.js
rules: {
...,
'prettier/prettier': ['error', { printWidth: 120 }],
}
By default, printWidth is 80. ESLint wants to break down the line to match this length requirement that can be overwitten.
I had the same issue, I changed the tab width inside the prettier formatter extension to the configured size.
I added in the .prettierc props "endOfline".
{
"endOfLine": "lf",
}
By default Windows uses CRLF line separator, so you can cahnge it through a global config of IDE to use LF instad of CRLF
I figured the formatting issue (VS Code):
settings.json:
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"editor.formatOnSave": true
.eslintrc.json: "useTabs": false}
.editorconfig: indent_style = space
if esbenp.prettier-vscode is enabled in VSCode - please disable it.
See my complete eslint + prettier setup for this repo: https://github.com/Sgryts/ng2-feature-toggle
In my case eslint was preventing Prettier to format the file while saving (I have set my VSCode to format the document upon saving).
Due that, Prettier was complaining about tabs / spaces being added when it was not required.
To fix I had to first fix eslint by using the below command(make sure to install the package globally):
eslint --fix
and then I had to Save the files again so Prettier could format them correctly.
Select all, right click, and select format selection
Try using the following settings:
.editorconfig file
indent_style = tab
indent_size = 2
.pretteierrc file
"tabWidth": 2
Note: reopen vscode after updating this setting.
Also if you have .eslintrc file, make sure that prettier is included in the extends array like this:
"extends": ["standard",..,"prettier"]
For me I had to remove
"extends": "eslint:recommended",
from the .eslintrc.js file in the project.
For 2-3 weeks, while I didn't change anything in prettier file, VSC started changing single quotes to double quotes, while it was always single quotes. I tried many options but it keeps changing it. Heres my .prettierrc
{
"trailingComma": "es5",
"printWidth": 200,
"semi": true,
"singleQuote": true,
"jsxSingleQuote": true,
"tabWidth": 2,
"quoteProps": "as-needed"
}
EDIT: I think, that it is a matter of .tsx files, as prettier has just option for .jsx files but still didn't find a solution.
In .prettierrc, add:
{
"singleQuote": true,
"jsxSingleQuote": true
}
create a .prettierrc file on your root folder and add:
{
"singleQuote": true
}
I have the same issue for a few days. I checked all the settings and they seem to be fine.
At the moment THE ONLY thing that helps is downgrading down to the previous version of Prettier in my case it was version 2.3.0 (I didn't check all the versions between this and the latest but few of them had the same issue)
On your User Settings make sure you have the following line:
"prettier.singleQuote": true
You can access the user settings by CTRL+, on windows or CMD+, on mac.
If you're using the settings GUI just search for single quote and check/uncheck the Prettier: Jsx Single quote and Prettier: Single quote
Best place to read up on this configuration is the website.
https://prettier.io/docs/en/configuration.html
If you are using a package.json, create a new key if you dont have a "prettier" key.
"prettier":{
"singleQuote": true
}
Or you could create a .prettierrc file written in JSON and add the same key pair value.
add tsxSingleQuote: true, in prettierrc.js file
I'm using create-react-app from Facebook, when it starts via 'npm start' it shows me a list of warnings, such as:
'Bla' is defined but never used
Expected '===' and instead saw '=='
I don't want to see any of these warnings, is there a way to supress them?
For local Eslint, add a file to your project named .eslintignore and add any directories or files you want to ignore:
build/
src/
*.js
Though you might as well remove it entirely at this point.
This doesn't work with building or starting the code however, if you are using create-react-app. There is no way to disable Eslint without ejecting because it's built into react-scripts. Anytime any you build or start the server, it will run eslint using its internal configs aside from special cases defined in package.json. The only way around that is to eject or prepend each file with the disable comment as mentioned elsewhere. See this issue on Github for more information.
Those warnings come from eslint. To disable them add /* eslint-disable */ at the top of the file you don't want to follow the eslint rules.
For specific eslint warning supression insert the following code at the beginning of the file.
/* eslint-disable react/no-direct-mutation-state */
My rep is not high enough to comment on #fly's excellent answer, so I'll C+P it to add this instead:
For anyone looking for a temporary but quick and effective workaround for disabling console warnings from DevTools, this might do the trick.
Disclaimer - this might not work on versions that are not mine(react-scripts v3.0.1, react-dev-utils#^9.0.1), so use it at your own risk.
enter this directory
node_modules/react-dev-utils/webpackHotDevClient.js
look for this function(should be around line 114)
function handleWarnings(warnings) {
either add the return at the start of function printWarnings() (line 124), or comment out the call to printWarnings() in line 145.
restart, eg with npm run start, for change to take effect.
This way, the hot reloader continues to work, but the annoying warnings which have already been caught in my editor are not output in the browser.
Recently the ability to add your own editor configurations was added, this can be used to "partially" disable the functionality of ESLint. You just need to create a configuration file in the root directory.
.eslintrc:
{
"parser": "babel-eslint"
}
.env
SKIP_PREFLIGHT_CHECK=true
If you create a new application, it will by default come with a pre-filled eslintConfig object in the package.json
To Completely Remove eslint warnings, what you can do is create a file named .eslintignore add * and save it. You wont see any more warning.
*
To Remove warnings from a particular folder means in the .eslintignore file add that folder name
/folder_name
/folder_name/file_name.js
You can also do this in the file level also. Add the following in the beginning of the file
/* eslint-disable */
To ignore the next line warning in a file
// eslint-disable-next-line
If you want to disable warnings in DevTools
Open the Console Tab.
Default levels/Custom levels -> uncheck Warnings
Set the DISABLE_ESLINT_PLUGIN environment variable:
DISABLE_ESLINT_PLUGIN=true npm start
For anyone looking for a temporary but quick and effective workaround for disabling console warnings from DevTools,
this might do the trick.
Disclaimer - this might not work on versions that are not mine(react-scripts v3.0.1, react-dev-utils#^9.0.1),
so use it at your own risk.
enter this directory
node_modules/react-dev-utils/webpackHotDevClient.js
look for this function(should be around line 114)
function handleWarnings(warnings) {
and add a return statement right after it.
Your code should end up looking like this(if you're using webstorm)
That should shut the webpackHotDevClient.js:{whateverLineIdontCare} right up.
Cheers.
If you're using create-react-app, then you can go into the package.json and edit the eslintConfig value. I just wanted to disable the "eqeqeq" and "no-unused-vars" rules, so mine looks like this:
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"rules": {
"eqeqeq": "off",
"no-unused-vars": "off"
}
},
You'll have to re-run npm start for it to take effect.
Add a .eslintignore file and add
src/*
You can read more about this at
https://eslint.org/docs/user-guide/configuring/ignoring-code
https://eslint.org/docs/user-guide/configuring/rules
You can use craco and configure craco.config.js for example
module.exports = {
webpack: {
configure: (webpackConfig) => {
const ignoreWarnings = [{ module: /some module/, message: /some message/ }]
return { ...webpackConfig, ignoreWarnings }
}
}
}
more details here
You can disable the typescript and/or linting errors with setting the environment variables in .env
TSC_COMPILE_ON_ERROR,
ESLINT_NO_DEV_ERRORS, to true
more information on advanced configuration for create react app on
https://create-react-app.dev/docs/advanced-configuration/
This is a simple way I avoid seeing unused variable warnings when debugging:
import someVariable from "./wherever"
// Prevent unused variable warnings
while (false) {
console.log(someVariable)
}
I am trying to get the Calendar Pro from Extensible to work.
if I do everything as the example says here, I get an undefined for the log function on Extensible.js :
However everything looks alright in my code :
Ext.Loader.setConfig({
enabled: true,
disableCaching: false,
paths: {
"Extensible": "js/lib/extensible-1.5.2/src",
"Extensible.example": "js/lib/extensible-1.5.2/examples"
}
});
Ext.require([
'Extensible.calendar.CalendarPanel',
'Extensible.calendar.data.MemoryEventStore',
'Extensible.calendar.CalendarPanel',
'Extensible.example.calendar.data.Events'
]);
Both the src and the examples paths are correct.
My Extinsible folder structure sits next to the extjs src like this :
It seems like I am missing something or Extensible is not yet being initialised properly.
Looks like you just forgot to include the Extensible.js by adding it to your requires statement:
Ext.require([
'Extensible.Extensible', //here
'Extensible.calendar.CalendarPanel',
'Extensible.calendar.data.MemoryEventStore',
'Extensible.calendar.CalendarPanel',
'Extensible.example.calendar.data.Events'
]);
This will include the main Extinsible.js file as well as the calendar and example files.
As mentioned on the support forums:
The Extensible.log error typically means that you are using the source
code from Github without compiling it first. Either run the build
script per the README file, or stick to the download zip containing
the pre-built files.
If you are using a properly-built version of the framework and still getting this error then you might provide more details about how you set things up.