I have a personal project with some friends where we have configured eslint and prettier and they are running like "automatically" when project is compiling. So, while I am working on my tasks and project is running, if I have a prettier error some where, or a linter error (an import or variable I typed but I am not using yet), project will directly FAIL and won't compile anymore....
Example:
This is super SUPER annoying. Those things are things that shouldn't break the app, I should be able to keep working and seeing the app compiled.
In my previous and current company we had and have prettier and/or eslint in the projects but they didnt run automatically, they just run when you type the commands on the terminal, or when commiting, husky ran the commands for you. Configuration is different and I tried to copy it but it never worked.
I have been trying for days googling this but nothing is working...
I want prettier and eslint to inform me the errors only when I write the commands by myself on the terminal (npm run lint and npm run format), but it looks like they are being ran by theirselves everytime project compiles...
This is the package.json:
{
"name": "gamma-project",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/jest": "^26.0.15",
"#types/node": "^12.0.0",
"#types/react": "^16.9.53",
"#types/react-dom": "^16.9.8",
"firebase": "8.0.2",
"i18next": "^19.9.0",
"i18next-browser-languagedetector": "^6.0.1",
"moment": "^2.29.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-i18next": "^11.8.8",
"react-phone-input-2": "^2.13.9",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"react-use-gesture": "^9.1.3",
"react-verification-code-input": "^1.2.9",
"styled-components": "^5.2.1",
"typescript": "^4.1.3",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint . --fix ",
"format": "prettier --write \"./**/*.{ts,tsx}\" --config ./.prettierrc"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#types/react-router-dom": "^5.1.6",
"#types/styled-components": "^5.1.7",
"#types/webpack-env": "^1.16.0",
"#typescript-eslint/eslint-plugin": "^4.11.1",
"#typescript-eslint/parser": "^4.11.1",
"eslint": "^7.17.0",
"eslint-config-prettier": "^7.1.0",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.3.0",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"husky": ">=4",
"lint-staged": ">=10",
"prettier": "^2.2.1"
}
}
.prettierrc:
{
"semi": true,
"tabWidth": 4,
"printWidth": 100,
"singleQuote": false,
"jsxSingleQuote": false,
"trailingComma": "none",
"jsxBracketSameLine": true,
"endOfLine": "auto"
}
.eslintrc.js:
module.exports = {
parser: "#typescript-eslint/parser",
root: true, // Make sure eslint picks up the config at the root of the directory
parserOptions: {
ecmaVersion: 2020, // Use the latest ecmascript standard
sourceType: "module", // Allows using import/export statements
ecmaFeatures: {
jsx: true // Enable JSX since we're using React
}
},
settings: {
react: {
version: "detect" // Automatically detect the react version
}
},
env: {
browser: true, // Enables browser globals like window and document
amd: true, // Enables require() and define() as global variables as per the amd spec.
node: true // Enables Node.js global variables and Node.js scoping.
},
extends: [
"eslint:recommended",
"plugin:react/recommended",
"plugin:jsx-a11y/recommended",
"plugin:prettier/recommended",
"plugin:#typescript-eslint/eslint-recommended",
"plugin:#typescript-eslint/recommended",
"prettier/#typescript-eslint"
],
plugins: ["#typescript-eslint"],
rules: {
"react/jsx-sort-props": 2,
"no-console": 2,
"prettier/prettier": ["error", {}, { usePrettierrc: true }], // Use our .prettierrc file as source
"#typescript-eslint/explicit-module-boundary-types": ["error"],
"#typescript-eslint/no-explicit-any": ["error"],
"#typescript-eslint/no-unused-vars": ["error"],
"#typescript-eslint/explicit-function-return-type": [
"error",
{
allowExpressions: false,
allowTypedFunctionExpressions: true,
allowHigherOrderFunctions: true,
allowDirectConstAssertionInArrowFunctions: true,
allowConciseArrowFunctionExpressionsStartingWithVoid: true
}
],
"#typescript-eslint/naming-convention": [
"error",
{
selector: "interface",
format: ["PascalCase"],
custom: {
regex: "^I[A-Z]",
match: true
}
}
]
}
};
I am praying to God someone in Stack Overflow to know exactly how to configure this to not do that, cause it really annoys me to the point that I close vcode and don't code anymore hahah.
If you don't want eslint to break your project, just rename the errors as warnings. The way you do this is to set emitWarning: true:
module.exports = {
entry: '...',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
emitWarning: true,
},
},
],
},
};
If that doesn't work out, try this plug-in, which converts all eslint errors to warnings: https://github.com/bfanger/eslint-plugin-only-warn.
Related
I am new to Vue.js and I am having an issue and have been stuck for a long while trying different fixes.
After starting a dev server using npm run serve, I would expect that when I make changes to any .vue or .js files within my directory, the server would refresh and display these changes. However, no matter what I try nothing happens. Nothing is compiling and nothing changes within my terminal. The only way I can refresh the server is by closing it and running a new one. Refreshing my browser page does nothing either. Really stumped on this one so will be eternally grateful if anyone can help as none of the fixes I found on here have worked for me :(
My vue.config.js is as follows:
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
client: {
progress: true
},
hot: false,
watchFiles: {
paths: ['src/**/*.js', 'src/**/*.vue', 'src/**/*.json', 'src/views/*.vue']
},
liveReload: true,
}
})
My package.json is:
{
"name": "product-and-cart",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
"nodemon": "^2.0.19",
"vue": "^3.2.13",
"vue-router": "^4.0.3"
},
"devDependencies": {
"#babel/core": "^7.12.16",
"#babel/eslint-parser": "^7.12.16",
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-eslint": "~5.0.0",
"#vue/cli-plugin-router": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"#vue/eslint-config-standard": "^6.1.0",
"eslint": "^7.32.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.1.0",
"eslint-plugin-vue": "^8.0.3",
"sass": "^1.54.5",
"sass-loader": "^13.0.2",
"webpack": "^5.74.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"#vue/standard"
],
"parserOptions": {
"parser": "#babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
]
}
And my jsconfig.json is:
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"#/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
],
"jsx": "preserve"
}
}
And babel.config.js:
module.exports = {
presets: [
'#vue/cli-plugin-babel/preset'
]
}
In your vue.config.js file, you set hot module replacement to false in devServer configuration; therefore, your changes won't be applied without refreshing the page. Hot module replacement is enabled by default in Vue CLI, you can remove hot from the configuration. Also, you don't have to set liveReload and watch options for this.
For more details, you can take a look at Vue CLI configuration and Webpack DevServer configuration.
I am trying to get the package react-native-reanimated to compile correctly in my webpack application, however I keep running into errors like these:
ERROR in ./node_modules/react-native-reanimated/lib/createAnimatedComponent.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /home/aftrumpet/app/node_modules/react-native-reanimated/lib/createAnimatedComponent.js: Support for the experimental syntax 'jsx' isn't currently enabled (507:21):
505 | default: { collapsable: false },
506 | });
> 507 | return (<Component {...props} ref={this._setComponentRef} {...platformProps}/>);
| ^
508 | }
509 | }
510 | AnimatedComponent.displayName = `AnimatedComponent(${Component.displayName || Component.name || 'Component'})`;
I know the solution to this is to not exclude the react-native-reanimated module from jsx compilation, however it is not working even though my webpack.config.js has it not excluded. Here is the webpack config:
const path = require('path');
module.exports = {
mode: 'development',
entry: './index.js',
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules\/(?!react-native-reanimated)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env', '#babel/preset-react'],
plugins: ['babel-plugin-react-native-web'],
},
},
},
],
},
};
I think there's a possibility the webpack application might not be reading the config, however I did include it in my root directory so this should not be happening.
Here is my package.json if that helps as well:
{
"name": "we_v2",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/preset-env": "^7.18.2",
"#babel/preset-react": "^7.17.12",
"#hookform/resolvers": "^2.8.8",
"#testing-library/jest-dom": "^5.16.2",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.26.0",
"clsx": "^1.1.1",
"highcharts": "^9.3.3",
"highcharts-border-radius": "^0.0.4",
"highcharts-react-official": "^3.1.0",
"react": "^17.0.2",
"react-bootstrap": "^2.4.0",
"react-dom": "^17.0.2",
"react-hook-form": "^7.27.0",
"react-native-gesture-handler": "^2.4.2",
"react-native-reanimated": "^2.8.0",
"react-native-web": "^0.17.7",
"react-navigation": "^4.4.4",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"sass": "^1.49.7",
"web-vitals": "^2.1.4",
"webpack": "^5.72.1",
"yup": "^0.32.11"
},
"scripts": {
"start": "PORT=8000 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Failed to load plugin 'vue' declared in 'package.json': Package subpath './lib/rules/array-bracket-spacing' is not defined by "exports" in C:\Users\<my_username>\FolderX\Subfolder\<appname>\eslint\package.json
Referenced from: C:\Users\<my_username>\FolderX\Subfolder\<appname>\package.json
That's the error I'm getting every time I npm run serve I've upated eslint, added prettier and fixed most of my vulnerability problems, and it still persists. I've combed the eslint issues on github and there is nothing like this, some issues are similar but they refer to eslintrc. Nothing is matching this exactly. I should mention that the app itself is very small and simple. It was supposed to be the start of a project but when I was adding views to the project, this happened.
package.json
"name": "online-birth-registration-system",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-router": "^4.0.14"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^5.0.3",
"#vue/cli-plugin-eslint": "^5.0.1",
"#vue/cli-service": "^5.0.3",
"babel-eslint": "^10.1.0",
"eslint": "^8.11.0",
"eslint-plugin-vue": "^6.2.2",
"prettier-eslint": "^13.0.0",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
Any help would be greatly appreciated.
I ran into the same issue with array-bracket-spacing and was able to fix it by downgrading eslint in my package.json from "^8.6.0" to "^7.32.0". None of the other suggested fixes worked for me either
Upgraded eslint-plugin-vue to 9.1.1
Solved it for me
I downloaded a frontend template online and yarn installed all packages and an .eslint.json file does exist and the extension is installed in Visual Studio Code but it does not show any linting errors.
Here is my .eslint.json file
{
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"modules": true,
"experimentalObjectRestSpread": true
}
},
"extends": [
"airbnb",
"prettier",
"prettier/react",
"plugin:flowtype/recommended"
],
"plugins": ["flowtype", "react"],
"env": {
"browser": true,
"node": true,
"jest": true
},
"rules": {
"import/no-extraneous-dependencies": ["error", { "packageDir": "./" }],
"jsx-a11y/anchor-is-valid": [
"error",
{
"components": ["Link"],
"specialLink": ["to"]
}
]
}
}
Here is my package.json file
{
"name": "reactjs-template",
"version": "0.1.0",
"private": true,
"dependencies": {
"eslint-plugin-prettier": "^3.1.1",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-scripts": "2.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"test:auto": "mocha test",
"eject": "react-scripts eject",
"lint": "eslint src --ext .js,.jsx",
"flow": "flow"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-flow": "^6.23.0",
"chai": "^4.2.0",
"chai-as-promised": "^7.1.1",
"eslint": "^6.6.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-config-prettier": "^6.6.0",
"eslint-plugin-flowtype": "^3.2.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.11.1",
"flow-bin": "0.83.0",
"flow-typed": "^2.5.1",
"mocha": "^5.2.0",
"prettier": "^1.19.1",
"selenium-webdriver": "^4.0.0-alpha.1"
}
}
here is my settings.json file
{
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "choseToUpdateConfiguration",
"eslint.packageManager": "yarn",
"javascript.autoClosingTags": false,
"javascript.format.enable": false,
"javascript.format.insertSpaceAfterCommaDelimiter": false,
"javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
"javascript.format.insertSpaceAfterKeywordsInControlFlowStatements": false,
"javascript.format.insertSpaceAfterSemicolonInForStatements": false,
"javascript.format.insertSpaceBeforeAndAfterBinaryOperators": false,
"typescript.tsc.autoDetect": "off",
"files.eol": "\n",
"prettier.endOfLine": "lf",
"prettier.jsxSingleQuote": true,
"prettier.singleQuote": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"eslint.alwaysShowStatus": true,
"eslint.lintTask.enable": true,
"eslint.run": "onSave",
"eslint.autoFixOnSave": true
}
The template I downloaded is a personal one for a company but here is the package.json to see what it entails
If and not missing something, to make it work follow or check you did the next steps:
Download ESLint and Prettier extensions for VSCode if you didn't
Install ESlint and Prettier libraries in your project npm install -D eslint prettier (or use yarn)
Install eslint-config-prettier (disables formatting for ESLint) and eslint-plugin-prettier (allows ESLint to show formatting errors as we type) npm install -D eslint-config-prettier eslint-plugin-prettier
After that and if all your dependencies are installed taking in consideration your eslintrc file, you should be able to restart vscode and see the errors in the editor directly.
Note that this is something "generic" and you may need to install more packages to add more validations.
I have a monorepo that is set according to this tutorial: tutorial.
This project is composed by a main folder (series4) that holds three packages, which are focused on web, mobile applications and common code - they are named web, app and common folders respectively.
Summarizing ... these folders are:
/series4/packages/web
/series4/packages/common
/series4/packages/app
I am trying to use the Modal module, however I get this error:
SyntaxError: series4/node_modules/react-native-modal/src/index.js:
Support for the experimental syntax 'classProperties' isn't currently
enabled (25:20)
I have read the documentation that is here: Babel.
However I was not able to solve this error.
The package.json that is in "series4" directory is:
{
"name": "#wow/common",
"version": "1.0.0",
"description": "",
"main": "dist/index.js",
"scripts": {
"build": "rimraf dist && tsc",
"watch": "tsc --watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "16.8.2",
"react-native": "0.59.0-rc.1",
"react-native-elements": "^1.1.0",
"react-native-image-slider-box": "^1.0.5",
"react-native-snap-carousel": "^3.8.0"
},
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.5.5",
"#types/react-native": "0.57.36",
"rimraf": "^2.6.3",
"typescript": "3.3.3"
}
}
The babel.config.js file (it is in series4 directory) is:
module.exports = {
presets: [
"#babel/preset-env",
"#babel/preset-react"
],
plugins: [
'#babel/proposal-class-properties',
'#babel/plugin-proposal-class-properties'
],
babelrcRoots: [
".",
"packages/*",
],
};
I have configured the following babelrc in web and common folders.
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
[
"#babel/plugin-proposal-class-properties"
]
]
}
The package.json in common folder is:
{
"name": "#wow/common",
"version": "1.0.0",
"description": "",
"main": "dist/index.js",
"scripts": {
"build": "rimraf dist && tsc",
"watch": "tsc --watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "16.8.2",
"react-native": "0.59.0-rc.1",
"react-native-elements": "^1.1.0",
"react-native-image-slider-box": "^1.0.5",
"react-native-snap-carousel": "^3.8.0"
},
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.5.5",
"#types/react-native": "0.57.36",
"rimraf": "^2.6.3",
"typescript": "3.3.3"
}
}
The package.json in web folder is:
{
"name": "react-native-web-workout-series",
"version": "0.1.0",
"private": true,
"dependencies": {
"#types/jest": "24.0.5",
"#types/node": "11.9.4",
"#types/react": "16.8.3",
"#types/react-dom": "16.8.1",
"#wow/common": "1.0.0",
"react": "^16.8.2",
"react-art": "16.8.2",
"react-dom": "^16.8.2",
"react-native": "0.55.4",
"react-native-modal": "^11.3.1",
"react-native-web": "0.10.0",
"react-scripts": "2.1.5",
"typescript": "3.3.3"
},
"scripts": {
"start": "cross-env SKIP_PREFLIGHT_CHECK=true react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.5.5",
"#types/react-native": "0.55.4",
"babel-plugin-module-resolver": "^3.2.0",
"cross-env": "^5.2.0"
}
}
I get the error when I run the
yarn start
command in web folder (the command works perfectly when I execute it without the Modal module).
What am I missing?
This is probably caused by react-native-modal not transpiling class property syntax. And, by default, node_modules will not be transpiled. When js engine read the class property syntax, it bails.
You need babel.config.js to affect the node_modules
module.exports = function (api) {
api.cache(true);
return {
babelrcRoots: [
'.',
'./modules/*'
],
ignore: [/node_modules/(?!react-native-modal)/],
presets: ["#babel/preset-env"]
};
}
'classProperties' isn't currently enabled also implies that the JS engine support class property syntax with some configuration, maybe there is a way to make the engine accept this syntax
See this
TL;DR
To have a custom config for babel in create-react-app, you need to first eject and work on the config directly after that.
Run npm run eject, go to config/webpack.config.js, find and replace the babel-loader with test: /\.(js|mjs|jsx|ts|tsx)$/.
...
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: [paths.appSrc, paths.appNodeModules],
exclude: /node_modules\/(?!react-native-modal|react-native-animatable)/,
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve(
'babel-preset-react-app/webpack-overrides'
),
presets: [
"#babel/preset-env",
"#babel/preset-react",
"#babel/preset-typescript",
],
plugins: [
[
require.resolve('babel-plugin-named-asset-import'),
{
loaderMap: {
svg: {
ReactComponent:
'#svgr/webpack?-svgo,+titleProp,+ref![path]',
},
},
},
],
['#babel/plugin-proposal-class-properties', { loose: true }],
],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
cacheCompression: isEnvProduction,
compact: isEnvProduction,
},
},
...
What I said is partially true, babel is not transpiling react-native-modal. And, why creating a babel.cofig.js doesn't work is, create-react-app uses a config that lives in another universe (see this SO).
At first I noticed there is a syntax error in your babel.config.js but building the project is not complaining anything about that. So I suspect it is not being used and come across the above SO post.
It now compiles successfully but throws some runtime error because some packages are built for mobile app and expo.
out of scope
One notable one is in react-native-modal.
// react-native-modal
import { DeviceEventEmitter } from 'react-native';
However, in react-native,
module.exports = {
get DeviceEventEmitter() { ... }
};
// which is approximately
export default {
DeviceEventEmitter,
}
Using named import as object destructuring is considered wrong by babel. You could workaround this by
presets: [
["#babel/preset-env", { module: 'commonjs' }],
"#babel/preset-react",
"#babel/preset-typescript",
],
However, DeviceEventEmitter will be undefined then. Other export works fine tho.