I am trying to use ESLint for mocha, but for some reason the rules don'y apply and the linting passes.
My config file:
module.exports = {
"env": {
"browser": true,
"es6": true,
"node": true,
},
"extends": "eslint:recommended",
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly",
"expect": "true"
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
overrides: [
{
files: [
"**/*.test.js"
],
env: {
mocha: true
},
plugins: ["mocha"],
rules: {
"mocha/no-exclusive-tests": "error",
"mocha/no-pending-tests": "error"
}
}
]
};
My test file only includes one line:
it('should throw a lint error')
The linter should find an error because of the 'no pending tests' rule, yet when I run the test file with eslint the linting passes as a success.
I have no idea why. I looked it up online and it seems like my configuration file is good as it is.
your solution is the same as this post answer.
However, the one that suits you better is the one you only edit the .eslintrc file as shown in eslint-configuration-doc, which would go like this:
module.exports = {
env: {
browser: false,
es6: true,
node: true,
mocha: true
}
// More code to go on that is not relative to your question ...
}
The line you are aiming is the one with
mocha: true
This solution worked for me.
{
"env": {
"browser": true,
"es6": true,
"mocha": true // add mocha as true to your ".eslintrc. *" file
}
}
Related
I have a Svelte app with Vite bundler. My linter is Eslint with Prettier and vite-plugin-svelte plugins. Linting works well, but I want to make the app show all the linting errors inside Vite hmr overlay, same way it works with syntax errors as in this picture
My question is: Is it even possible to make something like that with Vite? I found nothing helpful about Vite's hmr overlay in the documentation, or maybe I just missing something in Eslint/Prettier config?
Here is config files:
.eslintrc :
{
"extends": ["eslint:recommended", "airbnb-base", "prettier"],
"plugins": ["svelte3", "prettier"],
"env": {
"es6": true,
"browser": true,
"node": true
},
"overrides": [
{
"files": ["*.svelte"],
"processor": "svelte3/svelte3"
}
],
"parserOptions": {
"project": "./jsconfig.json"
},
"rules": {
"prefer-arrow-callback": "off",
"arrow-body-style": "off",
"import/prefer-default-export": "off",
"import/no-anonymous-default-export": [
"error",
{
"allowArray": true,
"allowArrowFunction": false,
"allowAnonymousClass": false,
"allowAnonymousFunction": false,
"allowCallExpression": true,
"allowLiteral": false,
"allowObject": true
}
],
"dot-notation": "off"
}
}
.prettierrc.js
module.exports = {
arrowParens: 'always',
bracketSpacing: true,
endOfLine: 'lf',
printWidth: 80,
singleQuote: true,
tabWidth: 2,
trailingComma: 'all',
overrides: [
{
files: 'package*.json',
options: {
printWidth: 1000,
},
},
],
};
vite.config.js
export default defineConfig({
plugins: [
svelte({
preprocess: preprocess(),
}),
],
});
If it's possible to write your own vite plugin or modify the one in question, adding throw new Error(YOUR_ERROR) in the right plugin hook will trigger the overlay. e.g: modifying this example
https://vitejs.dev/guide/api-plugin.html#transformindexhtml
const htmlPlugin = () => {
return {
name: 'html-transform',
transformIndexHtml(html) {
// ADD THROW LINE
throw new Error("this will showup in an overlay")
}
}
}
Will lead to...
I am trying to solve a problem with battling formatting on save in VSCode.
I do not have prettier installed as a standalone extension. I have eslint installed. I am working with typescript files.
In my editor, I see a warning on trailing commas and when I hit save, I see the trailing comma vanish, then reappear. I realized that I have trailing comma set to "none" in my .eslintrc.js file and set to "always" in my .prettierrc.js file. They are both below.
My have Vetur installed as well, but I think I only have vetur running on save because my vsconfig file specifies this:
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
But prettier is definitely being run twice. Is there some other setting I should be looking for? Or does eslint run prettier once for each set of config it finds.
Here is my eslintrc file:
module.exports = {
root: true,
env: {
node: true,
browser: true
},
extends: [
'plugin:vue/strongly-recommended',
'#vue/airbnb',
'#vue/typescript',
'plugin:prettier/recommended'
],
parserOptions: {
ecmaVersion: 2020,
parser: '#typescript-eslint/parser',
sourceType: 'module'
},
rules: {
'no-console': 'off',
'no-debugger': 'off',
'#typescript-eslint/no-empty-function': 'off',
'#typescript-eslint/no-namespace': 'off',
'#typescript-eslint/no-explicit-any': 'off',
'#typescript-eslint/no-non-null-assertion': 'off',
'#typescript-eslint/no-non-null-asserted-optional-chain': 'off',
'vue/component-name-in-template-casing': ['error', 'PascalCase'],
'vue/no-v-html': 'off',
'prettier/prettier': [
'warn',
{
singleQuote: true,
semi: true,
trailingComma: 'none',
printWidth: 100,
tabWidth: 2,
endOfLine: 'lf',
arrowParens: 'always',
bracketSpacing: true
}
]
},
overrides: [
{
files: ['**/*.test.ts'],
env: {
jest: true
}
}
]
};
and here is my .pretterrc.js file:
module.exports = {
semi: true,
trailingComma: 'all',
singleQuote: true,
printWidth: 100,
tabWidth: 2,
endOfLine: 'lf',
arrowParens: 'always',
bracketSpacing: true
};
I know that I could just make the two files consistent and I will get the proper output, but I don't want the formatting to be run twice. Working with typescript files seems to be slow enough as it is without formatting twice all the time.
I think the relevant portions of my settings.json file are:
"eslint.alwaysShowStatus": true,
"eslint.validate": [
"vue",
"html",
"javascript",
"typescript"
],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"[typescript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"editor.formatOnSave": true,
"vetur.experimental.templateInterpolationService": true,
"vetur.format.defaultFormatter.js": "prettier-eslint",
"vetur.format.defaultFormatter.ts": "prettier-tslint",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-expand-multiline"
},
"prettyhtml": {
"printWidth": 100,
"singleQuote": false,
"wrapAttributes": true,
"sortAttributes": true
},
"vetur.grammar.customBlocks": {
"docs": "md",
"i18n": "json"
}
},
Any pointers of which settings to look at would be appreciated.
I believe I have found the answer.
The first round of prettying is done by eslint and it uses the prettier config found in eslintrc.
The second round of prettying is done by vetur on the typescript section of the vue file and it uses the prettier config found in the prettierrc file.
What I did to fix the problem is to tell vetur not to format the typescript code by changing these two lines in the settings.json file for the workspace:
"vetur.format.defaultFormatter.js": "none",
"vetur.format.defaultFormatter.ts": "none",
These were prettier-eslint previously. Once I changed these to none, the typescript portion of the file removed the trailing commas and left them removed. The html template portion of the file was still formatted properly.
I assume this will speed up my file save since vetur can now ignore the typescript portion of the file when saving since it has already been processed by eslint.
You don't need to put the prettier config in the .eslintrc file, as the latest version of ESLint-plugin-prettier will load it from .prettierrc
The custom eslint rule runs ok in our project, but I cannot figure out how to run tests for it. My guess is that I am running wrong version of ecmascript and I need to use babel or adjust something in eslintrc.json to make this work with the mocha scripts.
Getting error message:
AssertionError [ERR_ASSERTION]: A fatal parsing error occurred: Parsing error: The keyword 'import' is reserved
The test:
/**
* #fileoverview Prohibit import underscore to help tree
* #author Jason Hocker
*/
"use strict";
//------------------------------------------------------------------------------
// Requirements
//------------------------------------------------------------------------------
var rule = require("../../../lib/rules/no-full-lodash-import"),
RuleTester = require("eslint").RuleTester;
//------------------------------------------------------------------------------
// Tests
//------------------------------------------------------------------------------
var ruleTester = new RuleTester();
ruleTester.run("no-full-lodash-import", rule, {
valid: [
{code: "import os from \"os\";\nimport fs from \"fs\";" },
{code: "import { merge } from \"lodash-es\";"}
],
invalid: [
{
code: "import _ from 'lodash';",
errors: [{
message: "Fill me in.",
type: "Me too"
}]
}
]
});
One of the .jslintrc.json files I tried:
{
"env": {
"browser": true,
"es6": true,
"mocha": true // add mocha as true to your ".eslintrc. *" file
},
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"semi": "error"
}
}
ESLint docs suggest that you can pass a configuration object to the RuleTester constructor.
In your case it should probably look like this:
var config = {
env: {
browser: true,
es6: true,
mocha: true, // add mocha as true to your ".eslintrc. *" file
},
parserOptions: {
ecmaVersion: 6,
sourceType: 'module',
ecmaFeatures: {
jsx: true,
},
},
}
var ruleTester = new RuleTester()
I want to use eslint in cmd to check ts file, but it can not get error info which I got in IDE.
I have set #typescript-eslint/parser in eslintrc.js. And eslint which running in cmd gave me some ts error when I did some wrong. But some wrong else did not be found.
I have a ts file with code:
interface Item {
name: string;
age: number;
}
const config: Array<Item> = [{
name: 'foo',
}]
so, I got some error in IDE:
Property 'age' is missing in type '{ name: string; age: number }' but required in type 'Item'.ts(2741)
That right. I need this error info.
But when I run eslint in cmd
eslint fileName.ts or eslint --ext .ts fileName.ts
cmd eslint return nothing or some other warning/error in this file.
eslintrc here
module.exports = {
"extends": ["xxx"],
"globals": {
"__SERVER_ENV__": true,
},
"rules": {
"react/jsx-filename-extension": 0,
"no-console": ["warn", { allow: ["error", "warn"] }],
"#typescript-eslint/no-unused-vars": ["error", {
"vars": "all",
"args": "after-used",
"ignoreRestSiblings": true
}],
},
"settings": {
"react": {
"createClass": "createReactClass", // Regex for Component Factory to use,
// default to "createReactClass"
"pragma": "React", // Pragma to use, default to "React"
"version": "detect", // React version. "detect" automatically picks the version you have installed.
// You can also use `16.0`, `16.3`, etc, if you want to override the detected value.
// default to latest and warns if missing
// It will default to "detect" in the future
},
"import/parsers": {
"#typescript-eslint/parser": [".ts", ".tsx"]
},
"import/resolver": {
// use <root>/tsconfig.json
"typescript": {
// always try to resolve types under `<roo/>#types` directory even it doesn't contain any source code, like`#types/unist`
"alwaysTryTypes": true,
"directory": "./",
},
},
},
"parser": "#typescript-eslint/parser",
"parserOptions": {
"project": "./tsconfig.json",
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"modules": true,
},
},
"plugins": ["#typescript-eslint", "import"],
};
and tsconfig.json
{
"compilerOptions": {
"experimentalDecorators": true,
"noImplicitAny": true,
"module": "commonjs",
"lib": ["es6","dom","es2017"],
"target": "es5",
"jsx": "react",
"types":["react"],
"outDir": "/output",
"baseUrl": ".",
"paths": {
"src/*": ["./src/*"]
},
"allowSyntheticDefaultImports": true,
"sourceMap": true
},
"awesomeTypescriptLoaderOptions": {
"useWebpackText": true,
"useTranspileModule": true,
"doTypeCheck": true,
"forkChecker": true
},
"include": [
".d.ts",
"./src/**/*"
]
}
I hope to get whole error info by cmd. what should I do?
It appears that eslint by design will not perform your Typescript type checking. I am just running my build command locally using tsc to be notified of this "property missing in type" error message, and fixing when the build fails.
It's very inconvenient because I only get alerted to one error per build attempt. If anyone has a better solution I'd appreciate any help.
I had an error in my pipeline in GitLab. I changed the settings in .eslint.json using information from StackOverflow. But I still have problem.
My .eslint.json looks like:
{
"extends": "eslint:recommended",
"rules": {
"semi": ["warn", "never"],
"quotes": ["warn", "single"],
"no-console": ["off"]
},
"parserOptions": {
"ecmaVersion": 9
},
"env": {
"es6": true,
"node": true,
"browser": true,
"amd": true
},
"globals": {
"$": true,
"require": true
"process": true
},
"root": true
}
In env I added "adm": true and in globals I added "process": true and "require": true.
The errors are:
error 'require' is not defined no-undef
error 'process' is not defined no-undef
The file where is the errors are looks like this:
const qs = require("querystring");
const coEndpoint =
process.env.NODE_ENV == "production"
So where is the problem? Is this a problem with env node? How can I fixed this?
To specify environments in a configuration file, use the env key and specify which environments you want to enable by setting each to true. For example, the following enables the browser, es6 and Node.js environments:
In your .eslintrc.js file ;
...
env: {
browser: true,
node: true, <<<<--- Add this
es6: true
},
...
Rename .eslint.json to .eslintrc.json or make sure that eslintConfig is specified in your package.json
https://eslint.org/docs/user-guide/configuring
Also make sure that eslint is started in the directory where your .eslintrc.json is and is not started with --no-eslintrc option.