Issue with "Command line crash course": (Prettier tool install error)

[victorkiko98]

MDN URL: https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line

What information was incorrect, unhelpful, or incomplete?

I downloaded the latest 17.8.0 Current Node.js from the link they referenced, and from there they said to install Prettier by inputting this command on the terminal: npm install --global prettier

Instead of installing and running it gave this error: npm ERR! code EACCES npm ERR! syscall mkdir npm ERR! path /usr/local/lib/node_modules/prettier npm ERR! errno -13 npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/prettier' npm ERR! [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/prettier'] { npm ERR! errno: -13, npm ERR! code: 'EACCES', npm ERR! syscall: 'mkdir', npm ERR! path: '/usr/local/lib/node_modules/prettier' npm ERR! } npm ERR! npm ERR! The operation was rejected by your operating system. npm ERR! It is likely you do not have the permissions to access this file as the current user npm ERR! npm ERR! If you believe this might be a permissions issue, please double-check the npm ERR! permissions of the file and its containing directories, or try running npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in: npm ERR! /Users/victorrafael/.npm/_logs/2022-04-01T15_09_30_948Z-debug-0.log

I tried downloading the older 16.14.2 LTS Node.js and tried the same thing but it gave the same error. I'm a complete beginner with the command line and only know web development from the beginning of the "Learn web development" guide to up to this point. So I really don't know what to do or understand what people are saying when I copied and pasted the error on google.

For now, I guess I'll just skip the Prettier CLI tool introduction and I hope its not too important to the rest of learning web development. Thanks

Specific section or headline?

What did you expect to see?

Did you test this? If so, how?

MDN Content page report details

* Folder: `en-us/learn/tools_and_testing/understanding_client-side_tools/command_line` * MDN URL: https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line * GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/learn/tools_and_testing/understanding_client-side_tools/command_line/index.md * Last commit: https://github.com/mdn/content/commit/c4b6112d856dbb5fa7b929e5034499c605a51e08 * Document last modified: 2022-03-28T14:52:22.000Z

[himanshugarg]

Thanks @victorkiko98 for reporting. This link might help if you keep running into EACCES errors

[hamishwillee]

@victorkiko98 It isn't strictly necessary - prettier simply makes your code easier to read (you run it and your code gets formatted to be more readable).

This is a permissions error. If you're using Ubuntu Linux you'll get this often - and I suspect that people who work with Linux a lot understand all the tips and tricks to get around it. I further suspect that documentation authors assume that if you have chosen to use Linux you're one of those people who can google yourself out of trouble.

On a personal level, I use linux in a VM on Windows. That means I can't break anything so I will cheat. To overcome a problem like this I run all the commands in sudo which gives elevated privileges. You would not do this on a real computer (apparently). I'd also highly recommend installing nvm for managing different versions of node - it won't matter when you get started, but you'll thank me for that advice later.

[hamishwillee]

OK, I have attempted to fix this with https://github.com/mdn/content/pull/14673. I don't see much choice given this is Learn material - though I have tried to point to the fact that there are potential risks.

[victorkiko98]

So an update; On the next articles it says for me to use Prettier, so I tried again but it gave the same error but this time I typed in: npx prettier And it seemed to have worked since it gave this message ... below. Just thought I should let somebody know.

... 1234567890-QWERTYUIOPasdfghjklZXCVBNMasdfghjkls-MacBook-Air:~ victorrafael$ npx prettier Need to install the following packages: prettier Ok to proceed? (y) y Usage: prettier [options] [file/dir/glob ...]

By default, output is written to stdout. Stdin is read if it is piped to Prettier and no files are given.

Output options:

-c, --check Check if the given files are formatted, print a human-friendly summary message and paths to unformatted files (see also --list-different). -l, --list-different Print the names of files that are different from Prettier's formatting (see also --check). -w, --write Edit files in-place. (Beware!)

Format options:

--arrow-parens <always|avoid> Include parentheses around a sole arrow function parameter. Defaults to always. --bracket-same-line Put > of opening tags on the last line instead of on a new line. Defaults to false. --no-bracket-spacing Do not print spaces between brackets. --embedded-language-formatting <auto|off> Control how Prettier formats quoted code embedded in the file. Defaults to auto. --end-of-line <lf|crlf|cr|auto> Which end of line characters to apply. Defaults to lf. --html-whitespace-sensitivity <css|strict|ignore> How to handle whitespaces in HTML. Defaults to css. --jsx-single-quote Use single quotes in JSX. Defaults to false. --parser <flow|babel|babel-flow|babel-ts|typescript|acorn|espree|meriyah|css|less|scss|json|json5|json-stringify|graphql|markdown|mdx|vue|yaml|glimmer|html|angular|lwc> Which parser to use. --print-width The line length where Prettier will try wrap. Defaults to 80. --prose-wrap <always|never|preserve> How to wrap prose. Defaults to preserve. --quote-props <as-needed|consistent|preserve> Change when properties in objects are quoted. Defaults to as-needed. --no-semi Do not print semicolons, except at the beginning of lines which may need them. --single-attribute-per-line Enforce single attribute per line in HTML, Vue and JSX. Defaults to false. --single-quote Use single quotes instead of double quotes. Defaults to false. --tab-width Number of spaces per indentation level. Defaults to 2. --trailing-comma <es5|none|all> Print trailing commas wherever possible when multi-line. Defaults to es5. --use-tabs Indent with tabs instead of spaces. Defaults to false. --vue-indent-script-and-style Indent script and style tags in Vue files. Defaults to false.

Config options:

--config Path to a Prettier configuration file (.prettierrc, package.json, prettier.config.js). --no-config Do not look for a configuration file. --config-precedence <cli-override|file-override|prefer-file> Define in which order config files and CLI options should be evaluated. Defaults to cli-override. --no-editorconfig Don't take .editorconfig into account when parsing configuration. --find-config-path Find and print the path to a configuration file for the given input file. --ignore-path Path to a file with patterns describing files to ignore. Defaults to .prettierignore. --plugin Add a plugin. Multiple plugins can be passed as separate --plugins. Defaults to []. --plugin-search-dir Custom directory that contains prettier plugins in node_modules subdirectory. Overrides default behavior when plugins are searched relatively to the location of Prettier. Multiple values are accepted. Defaults to []. --with-node-modules Process files inside 'node_modules' directory.

Editor options:

--cursor-offset Print (to stderr) where a cursor at the given position would move to after formatting. This option cannot be used with --range-start and --range-end. Defaults to -1. --range-end Format code ending at a given character offset (exclusive). The range will extend forwards to the end of the selected statement. This option cannot be used with --cursor-offset. Defaults to Infinity. --range-start Format code starting at a given character offset. The range will extend backwards to the start of the first line containing the selected statement. This option cannot be used with --cursor-offset. Defaults to 0.

Other options:

--no-color Do not colorize error messages. --no-error-on-unmatched-pattern Prevent errors when pattern is unmatched. --file-info Extract the following info (as JSON) for a given file path. Reported fields:

• ignored (boolean) - true if file path is filtered by --ignore-path
• inferredParser (string | null) - name of parser inferred from file path -h, --help Show CLI usage, or details about the given flag. Example: --help write -u, --ignore-unknown Ignore unknown files. --insert-pragma Insert @format pragma into file's first docblock comment. Defaults to false. --loglevel <silent|error|warn|log|debug> What level of logs to report. Defaults to log. --no-plugin-search Disable plugin autoloading. --require-pragma Require either '@prettier' or '@format' to be present in the file's first docblock comment in order for it to be formatted. Defaults to false. --stdin-filepath Path to the file to pretend that stdin comes from. --support-info Print support information as JSON. -v, --version Print Prettier version.

[victorkiko98]

In this article ... , it says to install Prettier with: "npm install prettier -g" and that resulted in error messages but when I inputted: "npm install prettier" no errors showed up, but that also may be because I already installed it by inputting "npx prettier".

... https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain

1234567890-QWERTYUIOPasdfghjklZXCVBNMasdfghjkls-MacBook-Air:~ victorrafael$ npm install prettier -g npm ERR! code EACCES npm ERR! syscall mkdir npm ERR! path /usr/local/lib/node_modules/prettier npm ERR! errno -13 npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/prettier' npm ERR! [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/prettier'] { npm ERR! errno: -13, npm ERR! code: 'EACCES', npm ERR! syscall: 'mkdir', npm ERR! path: '/usr/local/lib/node_modules/prettier' npm ERR! } npm ERR! npm ERR! The operation was rejected by your operating system. npm ERR! It is likely you do not have the permissions to access this file as the current user npm ERR! npm ERR! If you believe this might be a permissions issue, please double-check the npm ERR! permissions of the file and its containing directories, or try running npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in: npm ERR! /Users/victorrafael/.npm/_logs/2022-04-07T16_49_50_419Z-debug-0.log 1234567890-QWERTYUIOPasdfghjklZXCVBNMasdfghjkls-MacBook-Air:~ victorrafael$ npm install prettier

up to date, audited 2 packages in 581ms

1 package is looking for funding run npm fund for details

found 0 vulnerabilities 1234567890-QWERTYUIOPasdfghjklZXCVBNMasdfghjkls-MacBook-Air:~ victorrafael$

[hamishwillee]

@victorkiko98 Just be aware that you still need to fix your version - installing using npx in that way does not do that. For more information see: https://prettier.io/docs/en/install.html

[victorkiko98]

I'm sorry, I'm still confused. So in the link it says to input: "npm install --save-dev --save-exact prettier" and: "echo {}> .prettierrc.json" but when I have done that when I check to see if I have installed it globally, as said in the article, with "prettier -v" it says "command not found".

[victorkiko98]

So from here to here I tried to install nvm by inputting: "curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash" and it seemed to work but when I try to input $ nvm use 9 or $ nvm use 16, etc. it says "-bash: nvm: command not found". The other option I haven't tried yet is Manually change npm's default directory

[hamishwillee]

@victorkiko98 Thanks.

You might want to look at the fixed up docs in https://github.com/mdn/content/pull/14673

You will note that these removed "npm install --save-dev --save-exact prettier" and: "echo {}> .prettierrc.json" from the updated docs because neither of them are needed to install it locally.

The docs no longer install globally, so you can't do prettier -v - the system doesn't know "globally" what prettier is any more.

You would have to do npx prettier -v. That says "run this particular local package" Getting NVM to work is a different problem. What version of Ubuntu are you running this on, and is it "clean"? The most likely guess is that you haven't shut down your terminal and reloaded it. After running that curl command everything is set up, but it isn't applied for that current terminal.