How to configure StandardJS? - javascript

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.

Related

How to remove unused imports with a command?

I have files in my nx project with import declaration without any use and I want to remove them.
After I searched in stackoverflow I found the answer to open the file in vscode, and press alt+shift+o and when the declaration is not used then it's remove and sort the import.
But I have 10,000 files. so is there a command to do that in all those files? I looking in eslint but there is no rule for that.
Install the no-unused-imports plugin
Add unused-imports to the plugins section of your .eslintrc file
{
"plugins": ["...", "unused-imports"]
}
add the following rules
"no-unused-vars": "off",
"unused-imports/no-unused-imports": "error",
"unused-imports/no-unused-vars": [
"warn",
{ "vars": "all", "varsIgnorePattern": "^_", "args": "after-used", "argsIgnorePattern": "^_" }
],
Then add script to your package.json file
"scripts": {
...
"fix-lint-errors": "eslint nx --fix"
},
from command line run the script
npm run fix-lint-errors
or
yarn fix-lint-errors
If you are a heavy vscode user, so you can simply open your preference settings then add the following to your settings.json:
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.organizeImports": true
}
Or you can make a stand alone tslint file that has the following in it:
{
"extends": ["tslint-etc"],
"rules": {
"no-unsed-declaration: true"
}}
Then run the following command to fix the imports:
tslint --config tslint-imports.json --fix --project
Then use
ng build
or
ng build name_of_project --configuration=production

How to instruct ESLint to ignore a ruleset in a project?

In my VSCode (Win 10) I have installed the VSCode extension ESLint. On my computer is a Node project, with a JS file inside. If I open this JS file in VSCode, ESLint reports infractions from several different rule sets, including Prettier (screenshot). For this project only, how can I instruct ESLint to not check any of the rules in the Prettier rule set?
FYI when I open VSCode, here is a list of the extensions installed.
The .eslintrc.json file for this project contains the following:
{
"extends": [
"plugin:#wordpress/eslint-plugin/recommended"
],
"env": {
"browser": true,
"jquery": true
}
}
Note: The plugin #wordpress/eslint-plugin/recommended is a separate plugin I have added to this project, and it has rules that I want ESLint to list and report.
Inside eslintrc.js, you can omit/edit the rules you do not like, as such:
module.exports = {
extends: 'airbnb-base',
rules: {
'no-console': 'off',
'no-restricted-syntax': 'off',
'linebreak-style': 0,
'guard-for-in': 'off',
'max-len': ['error', { code: 160 }],
},
};
You can override such rules inside .eslintrc.json according to
{
"extends": [
...
],
...
"rules": {
"<rule1>": "off",
...
}
}
There are a few ways you can ignore rules from ESLint
Manually specify each rule in .eslintrc file as off
{
"extends": [
...
],
...
"rules": {
"<rule1>": "off",
...
}
}
Ignore files or folder from eslint rules i.e. add ignorePatterns
{
"ignorePatterns": ["temp.js", "**/vendor/*.js"],
"rules": {
//...
}
}
Create .eslintignore file and exclude the files or folder from being linted by ESLint. ESLint Ignore

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"
]
}

Compiling React projects in MonoRepo failing

I'm trying to setup yarn workspaces with my docker instance. This is my directory structure:
/monorepo/
/node_modules/
#libs/common
#services/common
#services/project-A
...OTHER DEPS...
package.json
/services/
/common/
index.jsx
package.json
/project-A/
webpack.base.config.js
**REACT project with babel, webpack, etc**
/libs/
/tools/
/common/
index.jsx
package.json
To simplify my docker setup I just configured this volume within my docker compose that maps the entire monorepo directory:
volumes:
- '../../../monorepo:/monorepo'
From there in my Project-A I import #libs/common and #services/common. This works fine when the common libraries are exporting simple functions like:
export const Add = (a,b) => a+b
Webpack has no issue resolving this and building Project-A.
However when I try to import a component from one of the common libraries like this:
/libs/tools/common:
import React from 'react'
export MySharedComponent = () => <>HELLLO</>
I get an error in the build process:
Error: Cannot find module '/monorepo/libs/tools/common/webpack.base.config.js'
Require stack:
- /monorepo/node_modules/eslint-import-resolver-webpack/index.js
- /monorepo/node_modules/eslint-module-utils/resolve.js
- /monorepo/node_modules/eslint-plugin-import/lib/rules/no-unresolved.js
- /monorepo/node_modules/eslint-plugin-import/lib/index.js
The eslint file under Project-A:
{
"parser": "babel-eslint",
"env": {
"browser": true,
"node": true,
"jest": true,
"cypress/globals": true
},
"settings": {
"import/resolver": {
"webpack": {
"config": "webpack.base.config.js"
}
}
}
}
The babel.rc under Project-A
{
"presets": [
[
"#babel/preset-env",
{
"targets": {
"node": "current"
}
}
],
"#babel/preset-react",
"#babel/preset-flow"
],
"env": {
"test": {
"plugins": [
[
"babel-plugin-webpack-alias",
{
"config": "./webpack.base.config.js"
}
]
]
}
}
}
My Question:
Is the main issue that there's no webpack config set up in the common repositories. Therefore the workspace does not know how to compile my shared resources?
Should there only be 1 webpack build config in my workspace used by all projects within the workspace? Currently I only have 1 config under Project-A?
What happens if I have specific webpack needs per project, does 1 config (if that's the answer) make sense?
1) First, there is a line in your code that you are referring to webpack.base.config.js in both babelrc and eslint,
so if that file does not exist, this error that says module not found makes sense.
2) Second: if you build and use your repositories in the same situation and environment, yes you can have one config for both but you might need environment setup (Development, Production) for your config.
But if you really want to make your dependencies and configs apart, webpack support multiple entries for your project which you can check that out.

VSCode Linter ES6 ES7 Babel linter

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.

Categories

Resources