First, preparation
First of all, we need to rely on the development tool — vscode, the advantage of this compiler is that you can freely add rich compiler plug-ins, improve your coding efficiency.
Vscode plugins used this time: ESLint, Manta’s Stylus Supremac (optional)
The development environment must of course be Node, with esLint dependencies installed globally.
The.eslintrc.js file is generated by using the NPM install -g eslint command, or you can find one online if you are comfortable with its rule configuration.
2. Project configuration (automatically format the current saved code according to ESLint, one-click repair)
Because of some of the conventions of development, we definitely won’t be coding exactly the way ESLint rules are written, and one-click fixes are needed.
First open the vscode configuration file seething. json and add the following configuration:
/ reset tabsize "editor. tabsize ": 2,
// # automatically format "editor.formatOnSave" every time you save: true,
// # fix the code in ESLint format every time you save it
// Add vUE support for "eslint.options":
{"configFile": "your.eslintrc.js file path"},
// # let Prettier use esLint's code format for validation
"prettier.eslintIntegration": true,
// # prettier.semi: false # prettier.semi: false
# prettier.singleQuote: true # prettier.singleQuote: true
/ / # function (name) and add a space between the brackets behind the "javascript. The format. InsertSpaceBeforeFunctionParenthesis" : true,
/ / # this habit according to the user's choices "vetur. Format. DefaultFormatter. HTML" : "js - beautify - HTML,
/ / # of vue js according to the editor's own ts format to format "vetur. Format. DefaultFormatter. Js" : "vscode - typescript," "vetur. Validation. The template" : true, "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "force-aligned"
// #vue component HTML code formatting style}},
/ / formatting stylus, Manta installation 's stylus Supremacy plug-in "stylusSupremacy. InsertColons" : If false, / / insert a colon "stylusSupremacy. InsertSemicolons" : false,
/ / whether the insertion points "stylusSupremacy. InsertBraces" : false,
/ / insert the curly braces "stylusSupremacy. InsertNewLineAroundImports" : false,
/ / after the import is wrap "stylusSupremacy insertNewLineAroundBlocks" : false, "window. The zoomLevel" : 0, "editor. CodeActionsOnSave" : { "source.fixAll.eslint": true }
// Whether the two selectors are newline}
Note that be sure to configure the path to your local ESLint file
After completing the above steps, restart the compiler and try to save the code for a page. If it meets the specification, congratulations!