-
|
There seems to be some rough edges around some of the latest versions. I'll describe the steps I've taken and errors that I've encountered along the way. First, ran vite create -- Did that, it loads in the following dependencies: "eslint": "^8.57.0",
"eslint-plugin-react": "^7.34.1",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.6",And the following lint script: "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",Try to run $ npm run lint
> product-finder-poc@0.0.0 lint
> eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0
Oops! Something went wrong! :(
ESLint: 8.57.0
ESLint couldn't find a configuration file. To set up a configuration file for this project, please run:
npm init @eslint/config
ESLint looked for configuration files in /dir/src and its ancestors. If it found none, it then looked in your home directory.
If you think you already have a configuration file or if you need more help, please stop by the ESLint Discord server: https://eslint.org/chatGreat, let's do that -- $ npm init @eslint/config
Need to install the following packages:
@eslint/create-config@1.0.2
Ok to proceed? (y) y
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · javascript
✔ Where does your code run? · browser
The config that you've selected requires the following dependencies:
eslint, globals, @eslint/js, eslint-plugin-react
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · npm
☕️Installing...
added 2 packages, changed 2 packages, and audited 334 packages in 1s
108 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Successfully created /dir/eslint.config.js file.This generates the following file: import globals from "globals";
import pluginJs from "@eslint/js";
import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";
export default [
{ languageOptions: { globals: globals.browser } },
pluginJs.configs.recommended,
pluginReactConfig
];Try to lint again, $ npm run lint
> product-finder-poc@0.0.0 lint
> eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0
Invalid option '--ext' - perhaps you meant '-c'?
You're using eslint.config.js, some command line flags are no longer available. Please see https://eslint.org/docs/latest/use/command-line-interface for details.OK, fair. I can appreciate that vite might not have latest greatest stuff in their template -- let's take that what they've given with a grain of salt.... Trying a new lint command without ext > eslint . --report-unused-disable-directives --max-warnings 0
> product-finder-poc@0.0.0 lint
> eslint .
Warning: React version not specified in eslint-plugin-react settings. See https://github.com/jsx-eslint/eslint-plugin-react#configuration .That's a little bit better... let's add the react version: diff --git a/eslint.config.js b/eslint.config.js
index 234b968..6905f43 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -5,5 +5,21 @@ import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";
export default [
{ languageOptions: { globals: globals.browser } },
pluginJs.configs.recommended,
- pluginReactConfig
+ pluginReactConfig,
+ {
+ settings: {
+ react: {
+ pragma: "React",
+ version: "detect",
+ },
+ },
+ },
];Try again, $ npm run lint
> product-finder-poc@0.0.0 lint
> eslint . --report-unused-disable-directives --max-warnings 0No output.... Great! But... did it work ? $ git diff src/App.jsx
diff --git a/src/App.jsx b/src/App.jsx
index b8b8473..215f81a 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -6,6 +6,8 @@ import './App.css'
function App() {
const [count, setCount] = useState(0)
+ z = asdf
+
return (
<>
<div>This should raise all kinds of lint warnings. $ npm run lint
> product-finder-poc@0.0.0 lint
> eslint . --report-unused-disable-directives --max-warnings 0No output.... Guess it doesn't work. Try to update the command a bit to explicitly point at the source files, $ npm run lint
> product-finder-poc@0.0.0 lint
> eslint src/*.jsx --report-unused-disable-directives --max-warnings 0
/dir/product-finder-poc/src/App.jsx
0:0 warning File ignored because of a matching ignore pattern. Use "--no-ignore" to disable file ignore settings or use "--no-warn-ignored" to suppress this warning
/dir/product-finder-poc/src/main.jsx
0:0 warning File ignored because of a matching ignore pattern. Use "--no-ignore" to disable file ignore settings or use "--no-warn-ignored" to suppress this warning
✖ 2 problems (0 errors, 2 warnings)
ESLint found too many warnings (maximum: 0).Well that's interesting. So the scaffolding didn't actually provide any ignore files, and ext is gone. I'm stuck here, what's the correct way to make this work? I don't really want to disable ignore patterns completely and suppressing the warning doesn't help. It should be noted I used most of the default options -- it did ask me about react and esm... I'm highly surprised it's giving me any problems.... Is it expecting "js" files instead of "jsx"? I'm still not clear on how to provide extension or ignore patterns. According to the docs, the default ignore should be: The config file it generated has just imports and uses them -- there's nowhere in that file where "extension", or "ignore" shows up ... I'd expect no files to be ignored so either there's a default that isn't obvious exposed or the message is lying. Here's the last output with $ npm run lint -- --debug
> product-finder-poc@0.0.0 lint
> eslint src/*.jsx --report-unused-disable-directives --max-warnings 0 --debug
eslint:cli CLI args: [ 'src/App.jsx', 'src/main.jsx', '--report-unused-disable-directives', '--max-warnings', '0', '--debug' ] +0ms
eslint:cli Using flat config? true +5ms
eslint:cli Running on files +3ms
eslint:flat-eslint Searching for eslint.config.js +0ms
eslint:flat-eslint Loading config from /dir/product-finder-poc/eslint.config.js +1ms
eslint:flat-eslint Config file URL is file:///dir/product-finder-poc/eslint.config.js +0ms
eslint:flat-eslint Deleting cache file at /dir/product-finder-poc/.eslintcache +175ms
eslint:flat-eslint 2 files found in: 4ms +4ms
/dir/product-finder-poc/src/App.jsx
0:0 warning File ignored because of a matching ignore pattern. Use "--no-ignore" to disable file ignore settings or use "--no-warn-ignored" to suppress this warning
/dir/product-finder-poc/src/main.jsx
0:0 warning File ignored because of a matching ignore pattern. Use "--no-ignore" to disable file ignore settings or use "--no-warn-ignored" to suppress this warning
✖ 2 problems (0 errors, 2 warnings)
ESLint found too many warnings (maximum: 0).Doesn't list anything about ignore patterns. I've uploaded my working tree here: https://github.com/tswaters/product-finder-poc The last commit is me trying to get eslint working: diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 0000000..814425b
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,17 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";
+
+export default [
+ { languageOptions: { globals: globals.browser } },
+ pluginJs.configs.recommended,
+ pluginReactConfig,
+ {
+ settings: {
+ react: {
+ pragma: "React",
+ version: "detect",
+ },
+ }
+ },
+];
diff --git a/package.json b/package.json
index cd9cf13..0012165 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
"scripts": {
"dev": "vite",
"build": "vite build",
- "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+ "lint": "eslint src/*.jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
@@ -14,6 +14,7 @@
"react-dom": "^18.2.0"
},
"devDependencies": {
+ "@eslint/js": "^9.0.0",
"@types/react": "^18.2.66",
"@types/react-dom": "^18.2.22",
"@vitejs/plugin-react": "^4.2.1",
@@ -21,6 +22,7 @@
"eslint-plugin-react": "^7.34.1",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.6",
+ "globals": "^15.0.0",
"vite": "^5.2.0"
}
}
diff --git a/src/App.jsx b/src/App.jsx
index b8b8473..215f81a 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -6,6 +6,8 @@ import './App.css'
function App() {
const [count, setCount] = useState(0)
+ z = asdf
+
return (
<>
<div> |
Beta Was this translation helpful? Give feedback.
Replies: 5 comments
-
|
Here are the docs for "files that match the overrides entries of your configuration" OK, let's try to get that matching: diff --git a/eslint.config.js b/eslint.config.js
index 814425b..9e91c61 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -7,11 +7,12 @@ export default [
pluginJs.configs.recommended,
pluginReactConfig,
{
+ files: ["*.jsx"],
settings: {
react: {
pragma: "React",$ npm run lint
> product-finder-poc@0.0.0 lint
> eslint src/*.jsx --report-unused-disable-directives --max-warnings 0
/dir/src/App.jsx
0:0 warning File ignored because of a matching ignore pattern. Use "--no-ignore" to disable file ignore settings or use "--no-warn-ignored" to suppress this warning
/home/local.epicure.ca/tyler.waters/code/DP/product-finder-poc/src/main.jsx
0:0 warning File ignored because of a matching ignore pattern. Use "--no-ignore" to disable file ignore settings or use "--no-warn-ignored" to suppress this warning
✖ 2 problems (0 errors, 2 warnings)
ESLint found too many warnings (maximum: 0).No dice. It should be noted that if I rename the files to ".js" and update the file search to "src/*.js" it does work as expected: $ mv src/main.jsx src/main.js
$ mv src/App.jsx src/App.js
$ npm run lint
$ npm run lint
> product-finder-poc@0.0.0 lint
> eslint . --report-unused-disable-directives --max-warnings 0
Warning: React version not specified in eslint-plugin-react settings. See https://github.com/jsx-eslint/eslint-plugin-react#configuration .
/dir/product-finder-poc/src/App.js
9:3 error 'z' is not defined no-undef
9:7 error 'asdf' is not defined no-undef
( ...snipped unrelated errors ...)
✖ 16 problems (16 errors, 0 warnings)
2 errors and 0 warnings potentially fixable with the `--fix` option.\So that works, but it's complaining about react pramga missing again, so I suppose my config file reference is not filtering things properly. diff --git a/eslint.config.js b/eslint.config.js
index 814425b..f914cc4 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -7,6 +7,7 @@ export default [
pluginJs.configs.recommended,
pluginReactConfig,
{
+ files: ["src/*.js"],
settings: {
react: {
pragma: "React",I tried it with Any time I tried to reference ".jsx" with |
Beta Was this translation helpful? Give feedback.
-
|
Crap, accidentally pressed the close button, my bad |
Beta Was this translation helpful? Give feedback.
-
|
So I guess the general question is: How does one specify |
Beta Was this translation helpful? Give feedback.
-
|
Oh, fun! Renaming the files to "js" breaks how vite works.. was so focused on getting the linting to work that I didn't try to actually start the application. It now raises the following error. Notably,
So back to the drawing board it seems. Might need to switch back to eslintrc mode. |
Beta Was this translation helpful? Give feedback.
-
|
Ended up reverting back to the old version of config, not ready for prime-time. commit 46a030c69670fda110be3620cebc38e498a3bf45
Author: Tyler Waters <tyler.waters@epicure.com>
Date: Fri Apr 19 14:00:52 2024 -0700
fix busted eslint
diff --git a/eslint.config.js b/eslint.config.js
deleted file mode 100644
index 1f22a3b..0000000
--- a/eslint.config.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import globals from 'globals'
-import pluginJs from '@eslint/js'
-import pluginReactConfig from 'eslint-plugin-react/configs/recommended.js'
-import eslintConfigPrettier from 'eslint-config-prettier'
-
-export default [
- { languageOptions: { globals: globals.browser } },
- pluginJs.configs.recommended,
- pluginReactConfig,
- eslintConfigPrettier,
- {
- settings: {
- react: {
- pragma: 'React',
- version: 'detect',
- },
- },
- },
-]
diff --git a/package.json b/package.json
index 8ae75db..a276f6f 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,10 @@
"react-dom": "^18.2.0"
},
"devDependencies": {
- "@eslint/js": "^9.0.0",
+ "@babel/core": "^7.24.4",
+ "@babel/eslint-parser": "^7.24.1",
+ "@babel/preset-env": "^7.24.4",
+ "@babel/preset-react": "^7.24.1",
"@types/react": "^18.2.66",
"@types/react-dom": "^18.2.22",
"@vitejs/plugin-react": "^4.2.1",
@@ -24,10 +27,82 @@
"eslint-plugin-react": "^7.34.1",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.6",
- "globals": "^15.0.0",
"prettier": "^3.2.5",
"vite": "^5.2.0"
},
+ "babel": {
+ "presets": [
+ [
+ "@babel/preset-env",
+ {
+ "modules": false
+ }
+ ],
+ "@babel/preset-react"
+ ]
+ },
+ "eslintConfig": {
+ "env": {
+ "es2020": true
+ },
+ "extends": [
+ "eslint:recommended",
+ "prettier"
+ ],
+ "parser": "@babel/eslint-parser",
+ "parserOptions": {
+ "ecmaVersion": 2020,
+ "sourceType": "module",
+ "requireConfigFile": false,
+ "ecmaFeatures": {
+ "jsx": true
+ }
+ },
+ "overrides": [
+ {
+ "files": "**/*.mjs",
+ "env": {
+ "node": true
+ }
+ },
+ {
+ "files": "src/*.{js,jsx}",
+ "env": {
+ "browser": true
+ },
+ "extends": [
+ "plugin:react/recommended"
+ ],
+ "plugins": [
+ "react",
+ "react-hooks"
+ ],
+ "rules": {
+ "react-hooks/rules-of-hooks": "error",
+ "react-hooks/exhaustive-deps": "warn"
+ }
+ }
+ ],
+ "rules": {
+ "no-unused-vars": [
+ 1
+ ],
+ "eqeqeq": [
+ 2,
+ "smart"
+ ]
+ },
+ "settings": {
+ "react": {
+ "pragma": "React",
+ "version": "detect"
+ }
+ }
+ },
+ "eslintIgnore": [
+ "dist",
+ "node_modules"
+ ],
"prettier": {
"singleQuote": true,
"semi": false
diff --git a/src/App.js b/src/App.jsx
similarity index 100%
rename from src/App.js
rename to src/App.jsx
diff --git a/src/main.js b/src/main.jsx
similarity index 100%
rename from src/main.js
rename to src/main.jsx |
Beta Was this translation helpful? Give feedback.
Ended up reverting back to the old version of config, not ready for prime-time.
commit 46a030c69670fda110be3620cebc38e498a3bf45 Author: Tyler Waters <tyler.waters@epicure.com> Date: Fri Apr 19 14:00:52 2024 -0700 fix busted eslint diff --git a/eslint.config.js b/eslint.config.js deleted file mode 100644 index 1f22a3b..0000000 --- a/eslint.config.js +++ /dev/null @@ -1,19 +0,0 @@ -import globals from 'globals' -import pluginJs from '@eslint/js' -import pluginReactConfig from 'eslint-plugin-react/configs/recommended.js' -import eslintConfigPrettier from 'eslint-config-prettier' - -export default [ - { languageOptions: { globals: globals.browser } }, - pluginJs.configs.recommended, -…