Develop Reference

Not able to build node js project for a specifc imported library

I am importing libraries in my vue.js project. For Library1 alone there are no errors. When i run my vue node js project build for library 2 i am importing , it always fails at below line and gets stuck with message 'building for production'.
Could not find implementations for the following rules specified in the configuration:
no-explicit-any
Try upgrading TSLint and/or ensuring that you have all necessary custom rules installed.
If TSLint was recently upgraded, you may have old rules configured which need to be cleaned up.
Is there a way to make this ignore by npm build ?
Below is my .eslintrc.js
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'eslint:recommended',
'#vue/typescript/recommended'
],
parserOptions: {
ecmaVersion: 2020,
ecmaFeatures: {
legacyDecorators: true,
},
},
rules: {
'#typescript-eslint/no-var-requires': 0,
'#typescript-eslint/ban-ts-ignore': 'off',
"#typescript-eslint/no-explicit-any": "off",
}
}
Do i need to update my tsconfig or tslint to stop checking for this when building production. This happens to only my vue library projecting i am using.
I use npm link and npm link to link and install libraries.

Well the easiest way to fix it is by removing tslint. As you Already have eslint. You just have have to install some extra eslint packages
npm i -D #typescript-eslint/eslint-plugin;
npm i -D #typescript-eslint/parser;
npm i -D eslint;
The following is the recommended
module.exports = {
env: {
commonjs: true,
es6: true,
node: true,
},
extends: [
"eslint:recommended",
"plugin:#typescript-eslint/eslint-recommended",
"plugin:#typescript-eslint/recommended",
"plugin:#typescript-eslint/recommended-requiring-type-checking",
],
globals: {
Atomics: "readonly",
SharedArrayBuffer: "readonly",
},
parser: "#typescript-eslint/parser",
parserOptions: {
project: "./tsconfig.json",
ecmaVersion: 2019,
},
plugins: ["#typescript-eslint"],
rules: {
.....
}
}
NOTE:
on your tsconfig.json
Add the include section. This as the name says includes the paths of your source files. And exclude does the opposite
{
"compilerOptions": {
....
},
"exclude": [
"/node_modules/",
"./config/"
],
"include": [
"./src/*.ts",
"./src/**/*.ts",
"./src/**/**/*.ts",
"./src/**/**/**/*.ts"
]
}

Eslint does not allow static class properties

I'm current developing an API on Node 12.14.1 and using Eslint to help me write the code.
Unfortunately it does not allow me to set static class properties as shown below:
class AuthManager {
static PROP = 'value'
}
The following error is given: Parsing error: Unexpected token =eslint
Static class properties are already supported on JS and on Node.
How can this rule be disable?
I also have the following .eslintrc.json file:
{
"env": {
"es6": true,
"node": true
},
"extends": "eslint:recommended",
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module"
}
}

ESLint v8 now supports static class properties natively: https://eslint.org/blog/2021/10/eslint-v8.0.0-released
parserOptions ecmaVersion should be set to 13, 2022, or "latest" to enable the support.
Add this to your .eslint.(cjs | json | js)
{
parserOptions: {
ecmaVersion: 2022,
}
}

ESLint with its default parser does not support class fields syntax for now. You can solve the problem by changing the configured parser to babel-eslint.
npm install --save-dev babel-eslint
// eslintrc.json
{
"parser": "babel-eslint",
...
}
Eslint's default parser, Espree, does not support class fields because that syntax is currently stage 3, and that it is decided that only stage 4 proposals are to be supported in Espree.

As of now, I had to use these configs
.eslintrc.js
module.exports = {
env: {
node: true,
es6: true,
},
extends: [
'airbnb-base',
],
parser: '#babel/eslint-parser',
parserOptions: {
babelOptions: {
configFile: './.babelrc',
},
ecmaVersion: 2018, // needed to support spread in objects
},
plugins: ['#babel'],
};
.babelrc
{
"presets": ["#babel/env"],
"plugins": [
"#babel/plugin-syntax-class-properties"
]
}
For which I had to install:
npm i -D #babel/preset-env
npm i -D #babel/eslint-parser
npm i -D #babel/eslint-plugin
npm i -D #babel/plugin-syntax-class-properties
Notice that the #babel modules above are the only #babel modules in my package.json.

you need to install #babel/eslint-parser:
yarn add --dev #babel/eslint-parser
And have the parser in your .eslintrc.yml for instance:
parser: "#babel/eslint-parser"

How to configure StandardJS?

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.

eslint 'html-webpack-plugin' should be listed in the project's dependencies, not devDependencies. (import/no-extraneous-dependencies)

In my Vs code editor, i am getting following error in simple require statement like:
const HtmlWebpackPlugin = require('html-webpack-plugin')
Error: [eslint] 'html-webpack-plugin' should be listed in the project's dependencies, not devDependencies. (import/no-extraneous-dependencies)
Can anyone explain what is no-extraneous-dependencies and why it is giving me this error in simple require statement in my webpack config. I went through this link : eslint should be listed in the project's dependencies, not devDependencies but it was not much helpful as it did not explain why i am adding that line.
My eslintrc.json file:
{
"env": {
"browser": true,
"es6": true,
"commonjs": true,
"node": true
},
"extends": ["airbnb", "prettier", "prettier/react"],
"plugins": ["prettier"],
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
}
}

You just need to tell eslint that it's ok to require dev dependency in webpack.
You can create .eslintrc in your webpack folder with
rules:
import/no-extraneous-dependencies: [error, { devDependencies: true }]
This will prevent the error from appearing.
Alternatively you can just set
const HtmlWebpackPlugin = require('html-webpack-plugin'); // eslint-disable-line import/no-extraneous-dependencies
to disable only this line

In your .eslintrc.json include webpack.config.js in devDependencies:
"rules": {
"import/no-extraneous-dependencies": [
"error",
{
"devDependencies": [
"**/*.test.ts?(x)",
"**/*.spec.ts?(x)",
"**/test-utils.ts",
"webpack.config.js"
]
}
],

Add "type": "module" to your package.json, then you can use ES6 import without this error/warning.

EsLint won't work VS 2017

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.