How to display ESLint issues when using #babel/cli - babeljs

We're using #babel/cli to build a library. I've been trying to show eslint issues when using babel --watch ... but no issues are reported.
babel.config.json
{
"presets": [
"#babel/preset-env",
"#babel/preset-react",
"#babel/preset-typescript"
]
}
.eslintrc
{
"env": {
"browser": true,
"node": true
},
"parser": "#babel/eslint-parser",
"extends": ["eslint:recommended", "plugin:react/recommended", "prettier"],
}
Is it possible to show eslint issues in #babel/cli's output?

Related

Eslint in VSCODE stops working (yet again)

Eslint stops working yet again..
{
"extends": ["airbnb"],
"root": true,
"parser": "babel-eslint",
"env": {
"browser": true
},
"plugins": [
"react-hooks",
"react"
],
"rules": {
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "error",
Using VSCODE Version: 1.47.0-insider
useEffect(() => {
someVarOutside
}, []);
The above should warn that someVarOutside is missing from dep array. react-hooks was working. Now it is not.

Getting error "Support for the experimental syntax 'classProperties' isn't currently enabled " when removing #babel/plugin-proposal-class-properties

I would like to remove the #babel/plugin-proposal-class-properties plugin as we are now targeting chrome 79 which supports class properties. I would imagine that removing this plugin shouldn't be a problem because we no longer need babel to transpile that code.
When I remove the plugin from the plugins section of the babelrc file, I am getting an error -
Module build failed (from ./node_modules/babel-loader/lib/index.js), ...
"Support for the experimental syntax 'classProperties' isn't currently enabled "
Relevant Package.json entries:
"#babel/core": "^7.0.0",
"#babel/preset-env": "^7.0.0",
"webpack": "4.40.0",
Here is my .babelrc file
{
"presets": [
"#babel/preset-react",
[
"#babel/preset-env",
{
"targets": {
"chrome": 79
}
}
],
"#babel/preset-typescript"
],
"plugins": [
"babel-plugin-styled-components"
]
}
Here is my webpack config, relevant loader configuration:
{
test: /\.(js(x)?|ts(x)?)$/,
exclude: [/node_modules/],
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}
]
},
Any help or insight would be appreciated.

VSCode intellisense jsconfig.json exclude jest types for src folder

how to exclude jest globals in intellisense from src/**/* ?
I want jest types to be seen only in test/**.spec.js files
current configuration:
{
"compilerOptions": {
"target": "es5",
"module": "commonJS",
"baseUrl": "./src",
},
"exclude": ["node_modules"],
"include": ["src/**/*", "typings/index.d.ts"],
"typeAcquisition": {
"exclude": [
"jest"
]
}
}
after that i still see jest types in intellisense

Using a different .eslintrc config file for typescript and javascript in VSCode?

I have a project with both JS and TS files (and JSX/TSX). I have a separate .eslintrc.json file for JS vs. TS. I'd like to be able to tell VSCode which eslint config file to use depending on the file extension.
Tried putting the settings in settings.json under the [typescript] field but that didn't work.
I think it should be possible to use 1 file and overrides option:
.eslintrc.js
module.exports = {
"root": true,
"plugins": ["#typescript-eslint"],
"rules": {
// JavaScript rules
},
"overrides": [
{
"files": ["*.ts", "*.tsx"],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"project": "./tsconfig.json"
},
"plugins": [
"#typescript-eslint"
],
"rules": {
// TypeScript rules
}
}
]
}
And changing workspace settings:
"eslint.validate": [
{
"language": "typescript",
"autoFix": true
},
{
"language": "typescriptreact",
"autoFix": true
}
]

vscode eslint not ignoring directory?

Despite clearly indicating in esignore that I want to ignore everything inside lib directory, vscode is saying 9 problems found in that minimized file.
If I run eslint inside foldera in command line everything is fine
using this extension
My directory structure:
foldera/
.eslintrc
.eslintignore
src/
file.js
lib/
wantoignore.min.js
folderb/
morefiles.js
.eslintrc
.eslintignore
.eslintrc file
{
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 2017,
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true
},
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"no-console": "off"
}
}
.eslintignore
lib/*
workspace settings:
"eslint.workingDirectories": [
"./client", "./server"
]
I solved this problem following the official doc here.
Basically you need to add the following content to the vscode workspace settings (usually located in your project's root/.vscode/settings.json), so that vscode knows which configs to honor when you're working on a specific script file:
{
"eslint.workingDirectories": [ "./reactApp" ],
}
I had a similar problem, figured out need to set workingDirectory to nested folder:
module
lib
src
index.ts
.eslintrc.js
.eslintignore
VSCode setting should be:
"eslint.workingDirectories": [ "./module/lib" ]
And not
"eslint.workingDirectories": [ "./module" ]
My solutions is:
Source map
root/.vscode/settings.json
Script
{
"eslint.workingDirectories": [{ "mode": "auto" }],
}