I am using eslint in my angularjs project. My project has a Github integration with Codacy (using config file). I have configured my global variables which need to be ignored from linting in the .eslintrc file as below:
{
"extends": "eslint:recommended",
"plugins": ["angular"],
"env": {
"browser": true,
"jasmine": true,
"node": true,
"es6": true,
"amd": true
},
"globals": {
"angular": true,
"module": true,
"inject": true,
"_": true,
"L": true,
"$": true,
"Highcharts": true,
"numeral": true
},
"rules": {
"angular/on-watch": 0,
"semi": 2
}
}
This works fine within the IDE and I get no errors. But Codacy doesn't pick-up the global ignored variables and keeps complaining about no-undef for angular, numeral, Highcharts etc.
'angular' is not defined. (no-undef)
'numeral' is not defined. (no-undef)
How do I fix this configuration?
You should change your project code patterns ESLint configuration to use a configuration file in Code Patterns -> ESLint
Cheers
Related
I am writing a React/Next app. I have created a react accordion-component external to the app. I am using rollup to create a package and importing that package into my app. When I run the app I get the error
./node_modules/#zeilsell-user1/accordion-component/dist/esm/index.js
Module parse failed: Unexpected token (1:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
use clientfunction getDefaultExportFromCjs (x) {
| return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
| }
I do not understand why I am seeing this error. The component is ESM so why the CSJ function? Nexrjs uses webpack, but that should handle csj, I can't find anything about loaders anyway.
I am assuming that the issue is on the component side, so I have included the rollup, tsconfig and package files below. Really appreciate any help that the community can offer me as I have been stuck on this problem for ages.
my rollup.config.mjs
import {nodeResolve} from '#rollup/plugin-node-resolve';
import commonjs from "#rollup/plugin-commonjs";
import typescript from "rollup-plugin-typescript2";
import banner2 from "rollup-plugin-banner2";
import dts from "rollup-plugin-dts";
import packageJson from "./package.json" assert { type: "json" };
export default [
{
input: "src/index.ts",
output: [
{
file: packageJson.module,
format: "esm",
sourcemap: true,
},
],
plugins: [
nodeResolve({extensions: [".js", ".jsx", ".ts", ".tsx", ".json"], }),
commonjs(),
typescript({
tsconfig: "./tsconfig.json",
verbosity: 1,
clean: true,
include: ["*.ts+(|x)", "**/*.ts+(|x)"],
}),
banner2(() => `use client`),
],
},
{
input: "dist/esm/index.d.ts",
output: [{ file: "dist/index.d.ts", format: "esm" }],
plugins: [dts()],
},
];
my tsconfig.json is
{
"compilerOptions": {
"target": "es2016",
"lib": ["es6", "dom", "es2016", "es2017"],
"jsx": "react-jsx",
"module": "ESNext",
"moduleResolution": "node",
"declaration": true,
"sourceMap": true,
"outDir": "dist",
"preserveConstEnums": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitAny": true,
"strictNullChecks": true,
"noImplicitThis": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"skipLibCheck": true
},
"include": ["src/**/*.ts*"],
"exclude": ["node_modules", "dist"]
}
and the package.json is
{
"name": "#zeilsell-user1/accordion-component",
"type": "module",
"version": "0.0.5",
"description": "This is a simple accordion component to be used with react/next apps",
"author": "...>",
"license": "MIT",
"private": false,
"main": "index.js",
"module": "dist/esm/index.js",
"files": [ "dist" ],
"types": "dist/index.d.ts",
"repository": "https://github.com/zeilsell-user1/accordion-component.git",
"publishConfig": { "registry": "https://npm.pkg.github.com/zeilsell-user1" },
"scripts": {
"rollup": "rollup -c rollup.config.mjs",
"rollup:watch": "rollup -cw",
},
"dependencies": {
},
"devDependencies": {
}
}
I have googled a lot for answers. I added the "type": "module", into the package.json following the suggestion from one site. I also switched to nodeResolve in rollup.config.mjs based on another suggestion. Neither of them changed the outcome.
After a lot of careful combing I realised that if I was specifying "type":"module" then there was no need to include "main": "index.js" as that was specific for cjs.
This solved the issue of cjs being picked up by the app rather than esm. It did result in another issue,below, but that is a 'good' problem as it is correctly picking up esm now!
./node_modules/#zeilsell-user1/accordion-component/dist/esm/index.js
Module parse failed: Unexpected token (1:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
use clientimport { jsxs, Fragment, jsx } from 'react/jsx-runtime';
| import { useState } from 'react';
| import styled from 'styled-components';
I am working on a react project which was built using create-react-app and later we ejected and modified the webpack config a lot. Right now I am having a hard time importing const enums from external libraries. I don't have control over that external package. It has the const enums defined in its d.ts files.
I have tried with babel-plugin-use-const-enum babel plugin and preset. It doesn't help me either.
My webpack config:
.....
.....
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: [paths.appSrc],
loader: require.resolve("babel-loader"),
options: {
customize: require.resolve("babel-preset-react-app/webpack-overrides"),
plugins: [
[require.resolve("babel-plugin-const-enum"), { transform: "constObject" }],
[require.resolve("#babel/plugin-transform-typescript"), { isTSX: true, optimizeConstEnums: true }],
[require.resolve("#babel/plugin-transform-react-jsx")],
[require.resolve("#babel/plugin-proposal-class-properties"), { loose: true }],
[require.resolve("#babel/plugin-proposal-nullish-coalescing-operator")],
[require.resolve("#babel/plugin-proposal-optional-chaining"), { isTSX: true }],
[require.resolve("#babel/plugin-transform-arrow-functions")],
[require.resolve("#babel/plugin-proposal-private-methods"), { loose: true }],
[
require.resolve("babel-plugin-named-asset-import"),
{
loaderMap: {
svg: {
ReactComponent: "#svgr/webpack?-svgo,+titleProp,+ref![path]",
},
},
},
],
],
presets: ["#babel/preset-env"],
},
},
.....
.....
My tsconfig:
{
"compilerOptions": {
"typeRoots": ["./typings", "node_modules/#types"],
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"noEmit": true,
"jsx": "react",
"downlevelIteration": true
},
"exclude": ["dist/**/*"],
}
The problem is that the build is successful but I am facing the runtime issue with all the const enums import like below
Uncaught TypeError: Cannot read properties of undefined (reading '<ConstEnumName>').
Package versions:
"#babel/core": "^7.11.6",
"babel-loader": "^8.1.0",
"typescript": "^3.9.7",
"webpack": "^4.44.2",
According to this thread, where the plugin's creator is involved, babel does not transpile .d.ts files, making it impossible to get enums from there. The only option seems to be migrating your config to use ts-loader and include the .d.ts files that have the enum declarations
tsconfig
{
...
"exclude": ["dist/**/*"],
"include": ["node_modules/[external_library]/**/*.d.ts"],
}
I'm setting up an environment this way to work with a ReactJs/Next.js project that uses 'styled jsx', but eslint can't fix the css flaws in the middle of the code.
How can I best configure eslint to work with the project I'm working on?
{
"parser": "#babel/eslint-parser",
"extends": [
"airbnb",
"plugin:react/recommended"
],
"env": {
"es6": true,
"browser": true,
"node": true,
"jest": true
},
"settings": {
"import/core-modules": ["styled-jsx", "styled-jsx/css"],
},
"plugins": [
"react",
"react-hooks"
],
"parserOptions": {
"sourceType": "module",
"allowImportExportEverywhere": true
},
"rules": {
// ..rules
}
}
Check this out:
https://github.com/vercel/styled-jsx#eslint
If you're using eslint-plugin-import, the css import will generate errors, being that it's a "magic" import (not listed in package.json). To avoid these, simply add the following line to your eslint configuration:
"settings": {"import/core-modules": ["styled-jsx/css"] }
This should remove any errors - but you won't get highlighting.
I'm trying to enable formatting on save in VSCode in a Gatsby project, per the Gatsby docs: https://www.gatsbyjs.org/tutorial/part-zero/#install-the-prettier-plugin
I also tried setting up eslint so now I have:
{
"env": {
"browser": true,
"es6": true
},
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": ["prettier"],
"rules": { "prettier/prettier": "error" },
"extends": ["airbnb", "prettier", "prettier/react"],
"settings": {
"import/core-modules": ["react"]
}
}
in my .eslintrc.json and
{
"endOfLine": "lf",
"semi": false,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5"
}
in my .prettierrc.
I have Format on save, on paste, and on type enabled in both my User Settings and my Workspace settings and it appears to work in my .eslintrc.json and in a .css file, but not with the Gatsby components (Header.js, Layout.js, etc). I can format these component files by opening the command palette and manually clicking 'Format Document,' but not automatically on save.
I am trying to set up a React project that uses webpack and ESLint with the airbnb config for ESLint. When I try starting up the project with webpack dev server, I get the following error:
"Module build failed: Error:
/react-template/node_modules/eslint-config-airbnb/rules/react-a11y.js:
ESLint configuration is invalid:
- Unexpected top-level property "ecmaFeatures"."
This is using eslint-config-airbnb v. 15.0.1. I checked the react-a11y.js file and confirmed there is a top-level property of "ecmaFeatures". I know as of ESLint 2.0.0 ecmaFeatures are now supposed to be under the parserOptions property, but I'm not sure if that only applies to the .eslintrc file. I'd like to use the airbnb config if possible, so I appreciate any assistance. Here is my .eslintrc file for reference.
.eslintrc
{
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 2016,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"es6": true,
"browser": true,
"node": true,
"jest": true
},
"extends": ["airbnb"]
}
I figured out a solution.
You have to edit react-a11y.js and react.js located in ./node_modules/.bin/eslint-config-airbnb/rules/.
In react-a11y.js remove:
ecmaFeatures: {
jsx: true
},
and replace it with:
parserOptions: {
ecmaFeatures: {
jsx: true,
},
},
In react.js just remove:
ecmaFeatures: {
jsx: true
},
and you should be good to go.
Also, I'm looking at the airbnb's repo right now and it looks like they fixed it almost a month ago, but I just reinstalled eslint-config-airbnb today, so I'm not sure what happened there.
Here are links to the react-a11y.js diff and the react.js diff. They show exactly what you need to add/remove.
Global eslint has been upgraded from 3.19.0-1 to 4.0.0-1 when the problem appeared for me.
eslint v4 is not yet supported in eslint-config-airbnb and eslint-config-airbnb-base
https://github.com/eslint/eslint/issues/8726#issuecomment-308367541
You JSON isn't valid. It's missing quotes around first "parser";
{
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 2016,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"es6": true,
"browser": true,
"node": true,
"jest": true
},
"extends": ["airbnb"]
}