Stuck on Reading Photoshop Format When Opening File

How to format your code through VScode's ESlint plugin

Alright, rather than giving a guide on how to use VScode'due south Prettier extension, I'd rather explain how to rely on ESlint and have both worlds: checking that your code is right (ESlint), then formatting it (Prettier).

What are the advantages of this?

• not forcing your entire team to use VScode with the Prettier extension, maybe some prefer Vim, IntelliJ'south Webstorm, Emacs etc... A tool-agnostic solution is IMO always better.
• I think that linting your code is more important that formatting it, but if yous have both extensions working at the same time, yous may have conflicts between the formatting and the linting.
• your hardware volition struggle less, if you accept less extensions running (mainly considering it can stop the conflicts)
• using an ESlint + Prettier philharmonic will strip the need to have a specific personal configuration bated of the codebase (untracked). Y'all'll likewise benefit from having Vue/Nuxt specific ESlint rules and a simpler/more universal configuration.
• an ESlint configuration tin be configured to exist run before a commit, in a CI/CD or anywhere really.

How to achieve this kind of setup?

Let's start first past installing the ESlint extension and only it, DO NOT install the Prettier one.

Not installed Vetur yet?

I do heavily recommend it for Vue2 apps (what Nuxt is running as of today), you can find it below. It will allow to quickly and simply ESlint (+ Prettier) whatsoever .vue files.

---

When it's washed, access the Command Palette with either ctrl + shift + p (Windows/Linux) or cmd + shift + p (Mac) and type Preferences: Open Default Settings (JSON)

There, you lot should accept something like this

          {   "workbench.colorTheme": "Solarized Dark", // instance of some of your own configuration    "editor.codeActionsOnSave": {     "source.fixAll": true,   },   "eslint.options": {     "extensions": [       ".html",       ".js",       ".vue",       ".jsx",     ]   },   "eslint.validate": [     "javascript",     "javascriptreact",     "typescript",     "typescriptreact",     "html",     "vue",   ], }                  

How to attempt that your configuration is now working?

To meet if my solution is working, please download this Github repo, get the latest stable Node version (eg: 14) and run yarn to have it working. Otherwise, simply open VScode.
This repo can as well be used to double-cheque that yours is properly configured by inspecting my files there!

So, you lot could access any .js or .vue file and see the problems in that location (Control Palette: Problems: Focus on Problems View). nuxt.config.js and /pages/alphabetize.vue are practiced examples, here is the index.vue file.

You tin see that we do have several things that tin can be fixed by Prettier only that we do too have an eslint(vue/require-v-for-key) fault. The solution is available as a comment only below btw.

PS: if you want to have inline ESlint warnings/errors equally in the screenshot, you can install Mistake Lens, it's a super amazing extension if you want to become rid of errors.

Salvage this file and you should saw that every auto-fixable things are done for yous. Usually it's mainly Prettier issues but it can also sometimes be ESlint likewise. Since we do have the ESlint rules from Nuxt, y'all'll get some nice good practices out of the box too!

Tada, information technology'due south working! If it'southward not, read the section at the end of my answer.

If you want to create a brand new project

You tin run npx create-nuxt-app my-super-crawly-projection and select few things there, the virtually important being Linting tools: Eslint + Prettier of course (hit space to opt-in for i of them).

Warning: equally of today, at that place is an additional step to do to have ESlint + Prettier working properly as shown in this Github issue. The set up should exist released pretty soon, then the configuration beneath will non be needed anymore!

To fix this, run yarn add together -D eslint-plugin-prettier and double check that your .eslintrc.js file is a follows

          module.exports = {   root: truthful,   env: {     browser: true,     node: true   },   parserOptions: {     parser: '@babel/eslint-parser',     requireConfigFile: false   },   extends: [     '@nuxtjs',     'plugin:prettier/recommended', // this line was updated     'prettier'   ],   plugins: [   ],   // add your custom rules here   rules: {} }                  

And then, you tin can have it working totally fine equally higher up. Save the file and information technology should run ESlint then Prettier i after the other!

---

If y'all nonetheless have some problems

• endeavour to use the Command Palette again and ESLINT: restart ESLint Server or even Developer: Reload Window
• feel complimentary to get out a comment or contact me if you need some help

mackmarm1975.blogspot.com

Source: https://stackoverflow.com/questions/52586965/why-does-prettier-not-format-code-in-vs-code