While console.log statements are useful for debugging during development, they should typically be removed before deploying to production. Leaving them in production code can have performance implications (though minor) and potentially expose sensitive information to the browser's console.
Add a rule to your ESLint configuration to flag or prevent console.log statements. This can be achieved by adding the "no-console" rule with a severity level of either "warn" or "error". This rule needs to be added to the rules section of the eslint config. Example config below:
// eslint.config.js
export default tseslint.config(
{ ignores: ['dist'] },
{
extends: [js.configs.recommended, ...tseslint.configs.recommended],
files: ['**/*.{ts,tsx}'],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
},
plugins: {
'react-hooks': reactHooks,
'react-refresh': reactRefresh,
},
rules: {
...reactHooks.configs.recommended.rules,
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
'no-console': 'warn' // or 'error'
},
},
)
This adds the no-console rule to the existing ESLint configuration and sets its severity to "warn".
While
console.logstatements are useful for debugging during development, they should typically be removed before deploying to production. Leaving them in production code can have performance implications (though minor) and potentially expose sensitive information to the browser's console.Add a rule to your ESLint configuration to flag or prevent
console.logstatements. This can be achieved by adding the "no-console" rule with a severity level of either "warn" or "error". This rule needs to be added to the rules section of the eslint config. Example config below:This adds the
no-consolerule to the existing ESLint configuration and sets its severity to "warn".