After nuxt packaging, how do you format the page code so that it is organized

eank007 注册会员
2023-02-25 11:14

Part of the answer references GPT, GPT_Pro better solution
Nuxt.js is a lightweight framework based on Vue.js, After packaging, the page source code can become cluttered and difficult to read, so you need to format the page source code into a neat array.

Generally, we can use code formatting tools to format page source code, such as HTML-Beautify, Prettier, etc. Html-beautify is a tool for formatting HTML, CSS, and JavaScript to help you get your cluttered code in order, either in real time on the browser side or on the server side.

Prettier is a JavaScript code formatting tool that automatically formats JavaScript code into a uniform style, making it prettier and easier to read and understand. Prettier can also be used to format the source code on a Nuxt page, where it automatically cleans html, css, javascript so that code is in an orderly way that is easier to understand and maintain.

Here are the steps to use Prettier to clean up the source code of a page packed by Nuxt:

  1. installing Prettier
    On the command line, type npm install -g prettier to install the Prettier tool.
  2. setting Prettier
    Add "prettier": "prettier --write" to the package.json file prettier: "Prettier --write";
  3. Format files
    Files can be prettier according to Prettier rules by running the npm run prettier command.
  4. View the effect
    After running the command, you can see the effect after the file has been organized.

In general, using formatting tools such as HTML-Beautify and Prettier makes it easy to format the Nuxt packaged page source code in an orderly way that is easier to understand and maintain than prettier.
If the answer is helpful, please accept it.

About the Author

Question Info

Publish Time
2023-02-25 11:14
Update Time
2023-02-25 11:14

Related Question


git fetch: how to just pull a pattern of tags

How use @import inside <style scoped> Nuxt 3

mongodb: restore replicaset after kubernetes scaling down

How can i append a done img variable to more element? [duplicate]

How to check if an item of a list is in another item of list on Bigquery?


How to start cyber_visualizer via dreamview?

Solved - Mongoose and typescript how can i update the data?