Next.js Discord

Discord Forum

vanilla js nextjs project linting and prettier

Unanswered
Blue whiting posted this in #help-forum
Open in Discord
Blue whitingOP
Hello,

For a js, non typescript, nextjs project, are these settings okay?

import js from "@eslint/js";
import globals from "globals";
import pluginReact from "eslint-plugin-react";

export default [
  {
    files: ["**/*.{js,mjs,cjs,jsx}"],
    ...js.configs.recommended,
  },
  {
    files: ["**/*.{js,mjs,cjs,jsx}"],
    languageOptions: {
      globals: globals.browser,
    },
  },
  pluginReact.configs.flat.recommended,
];

And for prettier
{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 100,
  "semi": false,
  "plugins": ["prettier-plugin-tailwindcss"]
}

Lastly
# Ignore artifacts:
build
coverage

52 Replies

Reddish carpenter ant
What errors are you getting etc? : P
Blue whitingOP
none, it all works like this. i just wanted to double check i had not made any mistakes
Reddish carpenter ant
you could refactor it
I'm pretty sure, you're repeating files twice
Blue whitingOP
oh stupid me
Reddish carpenter ant
you can also use js for discord xD
Blue whitingOP
yea
Reddish carpenter ant
export default [
  {
    files: ["**/*.{js,mjs,cjs,jsx}"],
    ...js.configs.recommended,
    languageOptions: {
      globals: globals.browser,
    },
  },
  pluginReact.configs.flat.recommended,
];
could prob do something like this instead
what is the last part?
git ignore or
"Lastly"
There might be other things as well but
I would need to check that myself with a new instance of your project or with these config settings xd
Blue whitingOP
that's for prettier
Reddish carpenter ant
prettier seems fine I guess 🤷‍♂️

but this? 
# Ignore artifacts:
build
coverage
shoouldn't you have more stuff for gitignore?
.vscode
node moduels etc
Blue whitingOP
yea i might need to add to it, i'm not sure. i don't ever run prettier from commandline
but perhaps
eslint is my bigger concern
Reddish carpenter ant
But for your entire project, you deffo want to ignore node_modules, that's beside what prettier does
Blue whitingOP
errors are showing up though so i assume it's fine
yeah
Reddish carpenter ant
id probbaly just copy paste the nextjs ignore from ts
actually this is what nextjs ts has for git ignore
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/versions

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*

# env files (can opt-in for committing if needed)
.env*

# vercel
.vercel

# typescript
*.tsbuildinfo
next-env.d.ts
so you probably want to copy paste that, and add anything else at the bottom
or at the start
Blue whitingOP
for a prettier file?
not sure if it needs it
Reddish carpenter ant
for your nextjs project
Blue whitingOP
the ignore file is for prettierignore
it's used if you run prettier from commandline
Reddish carpenter ant
Ah that ignore file lol
Blue whitingOP
yeah so i'm not super bothered, but you might have a good idea actually
ill try it out if i ever run the commandline lol
@Blue whiting Hello, For a js, non typescript, nextjs project, are these settings okay? import js from "@eslint/js"; import globals from "globals"; import pluginReact from "eslint-plugin-react"; export default [ { files: ["**/*.{js,mjs,cjs,jsx}"], ...js.configs.recommended, }, { files: ["**/*.{js,mjs,cjs,jsx}"], languageOptions: { globals: globals.browser, }, }, pluginReact.configs.flat.recommended, ]; And for prettier { "singleQuote": true, "trailingComma": "all", "printWidth": 100, "semi": false, "plugins": ["prettier-plugin-tailwindcss"] } Lastly # Ignore artifacts: build coverage
Reddish carpenter ant
I think though, you could have soemthing like this:
import js from '@eslint/js'
import globals from 'globals'
import pluginReact from 'eslint-plugin-react'

export default [
  {
    files: ['**/*.{js,mjs,cjs,jsx}'],
    languageOptions: {
      ecmaVersion: 2022,
      sourceType: 'module',
      globals: {
        ...globals.browser,
        ...globals.node,
      },
    },
    plugins: {
      react: pluginReact,
    },
    rules: {
      ...js.configs.recommended.rules,
      ...pluginReact.configs.recommended.rules,
      'react/react-in-jsx-scope': 'off',
    },
    settings: {
      react: {
        version: 'detect',
      },
    },
  },
]
This here for example, comes from TurboRepo, one of the eslint files they provide by default:
base.js
import js from "@eslint/js";
import eslintConfigPrettier from "eslint-config-prettier";
import turboPlugin from "eslint-plugin-turbo";
import tseslint from "typescript-eslint";
import onlyWarn from "eslint-plugin-only-warn";

/**
 * A shared ESLint configuration for the repository.
 *
 * @type {import("eslint").Linter.Config[]}
 * */
export const config = [
  js.configs.recommended,
  eslintConfigPrettier,
  ...tseslint.configs.recommended,
  {
    plugins: {
      turbo: turboPlugin,
    },
    rules: {
      "turbo/no-undeclared-env-vars": "warn",
    },
  },
  {
    plugins: {
      onlyWarn,
    },
  },
  {
    ignores: ["dist/**"],
  },
];
next.js
import js from "@eslint/js";
import eslintConfigPrettier from "eslint-config-prettier";
import tseslint from "typescript-eslint";
import pluginReactHooks from "eslint-plugin-react-hooks";
import pluginReact from "eslint-plugin-react";
import globals from "globals";
import pluginNext from "@next/eslint-plugin-next";
import { config as baseConfig } from "./base.js";

/**
 * A custom ESLint configuration for libraries that use Next.js.
 *
 * @type {import("eslint").Linter.Config[]}
 * */
export const nextJsConfig = [
  ...baseConfig,
  js.configs.recommended,
  eslintConfigPrettier,
  ...tseslint.configs.recommended,
  {
    ...pluginReact.configs.flat.recommended,
    languageOptions: {
      ...pluginReact.configs.flat.recommended.languageOptions,
      globals: {
        ...globals.serviceworker,
      },
    },
  },
  {
    plugins: {
      "@next/next": pluginNext,
    },
    rules: {
      ...pluginNext.configs.recommended.rules,
      ...pluginNext.configs["core-web-vitals"].rules,
    },
  },
  {
    plugins: {
      "react-hooks": pluginReactHooks,
    },
    settings: { react: { version: "detect" } },
    rules: {
      ...pluginReactHooks.configs.recommended.rules,
      // React scope no longer necessary with new JSX transform.
      "react/react-in-jsx-scope": "off",
    },
  },
];
react-internatl.js
import js from "@eslint/js";
import eslintConfigPrettier from "eslint-config-prettier";
import tseslint from "typescript-eslint";
import pluginReactHooks from "eslint-plugin-react-hooks";
import pluginReact from "eslint-plugin-react";
import globals from "globals";
import { config as baseConfig } from "./base.js";

/**
 * A custom ESLint configuration for libraries that use React.
 *
 * @type {import("eslint").Linter.Config[]} */
export const config = [
  ...baseConfig,
  js.configs.recommended,
  eslintConfigPrettier,
  ...tseslint.configs.recommended,
  pluginReact.configs.flat.recommended,
  {
    languageOptions: {
      ...pluginReact.configs.flat.recommended.languageOptions,
      globals: {
        ...globals.serviceworker,
        ...globals.browser,
      },
    },
  },
  {
    plugins: {
      "react-hooks": pluginReactHooks,
    },
    settings: { react: { version: "detect" } },
    rules: {
      ...pluginReactHooks.configs.recommended.rules,
      // React scope no longer necessary with new JSX transform.
      "react/react-in-jsx-scope": "off",
    },
  },
];
I don't know if its helpful
but id probbaly try to follow how they did it structure wise, plugin etc..
you might want to add rules plugins etc
🤷‍♂️
I'm still in the process to master this myself 😄
@Reddish carpenter ant I don't know if its helpful
Blue whitingOP
thanks! sorry went afk
Blue whitingOP
this seems to give an error, but i think it's what I want

import js from '@eslint/js'
import globals from 'globals'
import pluginReact from 'eslint-plugin-react'
import pluginReactHooks from 'eslint-plugin-react-hooks'
import eslintConfigPrettier from 'eslint-config-prettier'

export default [
  {
    files: ['**/*.{js,mjs,cjs,jsx}'],
    ...js.configs.recommended,
    languageOptions: {
      globals: globals.browser,
    },
    plugins: {
      react: pluginReact,
      'react-hooks': pluginReactHooks,
    },
    rules: {
      ...pluginReact.configs.recommended.rules,
      ...pluginReactHooks.configs.recommended.rules,
      'react/prop-types': 'off',
      'react/react-in-jsx-scope': 'off',
    },
    settings: {
      react: {
        version: 'detect',
      },
    },
  },
  eslintConfigPrettier,
]
Reddish carpenter ant
what error?
Blue whitingOP
Blue whitingOP
figured it out
needed to update some settings with nvim and vscode, plus mine was totally wrong lol