How to fix prettier config in vuexy project with react?

Question

I already configured my npm with the following:

 -npm install --force --legacy-peer-deps -npm install --save-dev --save-exact prettier

And my .eslintrc.js is the following:

module.exports = { env: { node: true, es6: true, browser: true, },

parserOptions: { ecmaVersion: 6, sourceType: 'module', ecmaFeatures: { jsx: true, modules: true, experimentalObjectRestSpread: true, }, },

extends: ['prettier'], rules: { 'no-console': 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',

// Best Practices
eqeqeq: 'error',
'no-invalid-this': 'error',
'no-return-assign': 'error',
'no-unused-expressions': ['error', {allowTernary: true}],
'no-useless-concat': 'error',
'no-useless-return': 'error',
// Variable
// 'init-declarations': 'error',
'no-use-before-define': 'error',

// Stylistic Issues
'array-bracket-newline': ['error', {multiline: true, minItems: null}],
'array-bracket-spacing': 'error',
'brace-style': ['error', '1tbs', {allowSingleLine: true}],
'block-spacing': 'error',
'comma-spacing': 'error',
'comma-style': 'error',
'computed-property-spacing': 'error',
'func-call-spacing': 'error',
'implicit-arrow-linebreak': ['error', 'beside'],
// indent: ['error', 4],
'keyword-spacing': 'error',
'multiline-ternary': ['error', 'never'],
// 'no-lonely-if': 'error',
'no-mixed-operators': 'error',
'no-multiple-empty-lines': ['error', {max: 2, maxEOF: 1}],
'no-tabs': 'error',
'no-unneeded-ternary': 'error',
'no-whitespace-before-property': 'error',
'nonblock-statement-body-position': 'error',
'object-property-newline': ['error', {allowAllPropertiesOnSameLine: true}],

// quotes: ['error', 'prefer-single'],
semi: [2, 'never'],
'semi-spacing': 'error',
'space-before-blocks': 'error',
// 'space-before-function-paren': 'error',
'space-in-parens': 'error',
'space-infix-ops': 'error',
'space-unary-ops': 'error',

// ES6
'arrow-spacing': 'error',
'no-confusing-arrow': 'error',
'no-duplicate-imports': 'error',
'no-var': 'error',
'object-shorthand': 'error',
'prefer-const': 'error',
'prefer-template': 'error',

},

}

The result:

[![introducir la descripción de la imagen aquí][1]][1]


  [1]: https://i.stack.imgur.com/Bs89i.png

Answer 1

I think you only want to run prettier on .js files.

You can use a glob in prettier to tell for example to only run in .js files

npx prettier "**/*.js"

This will run prettier in all files ending with .js

Maybe you want this in your package.json script

"scripts": {
  "pretty": "prettier --write '**/*.js'",
},

Reference: https://prettier.io/docs/en/cli.html#file-patterns