Eslint with MDX and vsCode - eslint

I am currently working with .mdx files within vscode and realised that eslint isn't really working the way I am expecting it too.
For example take this file
import { Meta } from '#storybook/addon-docs';
import { useResponsive, getBreakpoints } from './useResponsive';
<Meta
title="Hooks/useResponsive"
component={useResponsive}
parameters={{ chromatic: { disable: true } }}
/>
# useResponsive
This hook returns true or false depending on if your screen matches the requested breakpoints
I have installed eslint-mdx and I would expect eslint to tell me that getBreakpoints isn't being used. It does if I run eslint via the command line, but I am expecting vscode to also add those red squiggly lines telling me the same thing.
Does anyone know of what eslint or vscode settings I might need to use to get something like this to work

Related

Can't enable no-console using eslint cli

I'm using eslint, and in my configuration file I have "no-console": "off".
I want to turn it on for my CI system, so I've been using the command line (vue cli syntax):
vue-cli-service lint --rule '"no-console": "error"'
This doesn't work.
However, if I invert things (set error in the configuration, and pass off as a flag) it does work.
Anyone know why?
EDIT: it should probably look like vue-cli-service --rule 'no-console: 2'
PS: "error" may be working too I guess.
You can make a config in a lot of places but the usual one is probably .eslintrc.js in which you can write
module.exports = {
[...]
// add your custom rules here
rules: {
"no-console": "off",
},
}
As shown here: https://eslint.org/docs/rules/no-console
This one should work but it always depend on how your project is setup too.

How to disable autofix for specific rules in eslint using CLI?

I want to be able to disable the rules that --fix fixes when running eslint in a console for a repo. The reason for this is because --fix leads to undesirable behavior for our jsdoc eslint rules. It creates invalid or sometimes empty jsdoc in our project- which typically leads to even more eslint rules (due to our configuration) and leads to tons of manual fixing or removal.
I want to just run --fix without it touching any jsdoc rules so that I can complete jsdoc manually- while eslint fixes all the rest of the rules.
I came across this SO question- but package mentioned in the answer does not support non-core plugins.
ESLint autofix ignore rule
Is there anything I can do short of modifying my eslintrc file every time I run the linter or using vscode for linting and modifying the config for the web editor instead? Its not a big deal for newer files- but linting legacy files is a chore when there's hundreds of spacing errors that I can't automatically fix easily.
Using an .eslintrc.js file you can do something like this:
const isFixMode = process.argv.includes('--fix');
const config = {
rules: {
'no-console': 'error',
...(isFixMode && {
'no-console': 'warn',
}),
},
};
module.exports = config;
Technically, that already exists, right? If a user wants to avoid auto-fixing a particular rule, they can use:
eslint somedir --fix --rule "somerule: 0"
Or, if they want to whitelist a set of rules, they can use &nbps --no-eslintrc and specify rules directly or use --config and point to a particular config that they want to use for fixes.
Ok here’s another idea. Convert you .eslinrc file into .eslintrc.js. This will allow you to programmatically set eslint config.
Then you could use the commander library to detect the —fix flag and set a Boolean to determine which eslint rules you would like to disable.
What worked best for me was setting the rule to warn and afterwards run.
eslint . --fix --quiet
It is not an error anymore, but better than getting my code broken by a erroneous fixer.

Trying to ignore flake8 W503 error in Sublime, but edits to user settings do not affect it

I have tried editing my user Sublime Linter settings to:
"linters":
{
"flake8": {
"args": ["--ignore W503"],
},
}
However, this has not gotten rid of the error flags.
First you probably want --extend-ignore and not --ignore
second, your arguments are malformed, you're telling flake8 to ignore the W503 code (note the space at the beginning)
Here's how you could configure sublime to do what you want:
I have tried editing my user Sublime Linter settings to:
"linters":
{
"flake8": {
"args": ["--extend-ignore", "W503"],
},
}
though I'd suggest instead to configure flake8 via its config file:
[flake8]
extend-ignore = W503
note that you shouldn't need that, since W503 is part of the default ignore set
disclaimer: I'm the current flake8 maintainer

React Developer Tools Shows "Waiting for roots to load..."

I've just switched to Preact 8.4.2 and would like to get the React Developer Tools to work as well. In my webpack.config.js, I've added:
alias: {
react: 'preact-compat',
'react-dom': 'preact-compat'
}
In my entry .js file, I've added:
require('preact/debug');
After adding these, I was getting an error when attempting to build:
Module parse failed: /myProject/node_modules/preact/src/preact.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import { h, h as createElement } from './h';
| import { cloneElement } from './clone-element';
| import { Component } from './component';
# ./~/preact/debug.js 6:14-31
I only had .jsx files loading with babel-loader (not .js), so I added an additional entry in my webpack.config.js file:
{
test: /\.js$/,
include: /node_modules\/preact/,
loader: 'babel-loader'
},
After adding this entry, I'm able to build without issues, but my React Developer Tools just shows:
Waiting for roots to load...
to reload the inspector [click here]
Something is either up with your preact app or your webpack config. I just solved a similar problem.
First step, check if its your preact. If you have no console errors, drop your preact into this working boilerplate (you'll have to do a little rewiring to get it working) https://github.com/developit/preact-boilerplate
If after firing it up with your code, Devtools works as expected, then there is something wrong with your build. In that case it turns into a game of line by line updating your (mostly) working build to match preact-boilerplate.
In my case, I had included "src" in my webpack resolve. This threw no errors in terminal/console, and the build worked perfectly otherwise. Once I found it, devtools started working.

JSHint: Turn off missing semicolon warning

How do I turn off missing semicolon warnings with JSHint in Sublime? I have tried multiple things on the internet to no avail.
asi is an option within the sublime linter that will suppress the semicolon warnings when set to true.
See JSHint Info
For additional information.
Ultimately, you'll want to create a .jshintrc file in your app root folder and add the following code inside:
{
"asi": true,
}
Set the file type as json, save it and restart your ide.
By inserting the following line at the beginning of your .js Javascript file should work:
/*jshint -W033 */

Resources