Shulou(Shulou.com)06/02 Report--

This article is about what vscode eslint refers to. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

ESlint: a tool for unifying the style of JavaScript code, excluding css, html, and so on.

Solution:

1. Install the plug-in

(1) ESlint:javascript code detection tool, you can configure to format js every time you save, but only a little bit each time. You have to press and hold Ctrl+S several times in a row before formatting. Experience by yourself.

(2) vetur: you can format html, standard css (with semicolons and curly braces), standard js (with semicolons and double quotes), and vue files

But! Formatted standard js files do not conform to the ESlint specification and will give you double quotes, semicolons, etc., like this

(bad)

Html can be formatted for branch display.

(good)

(3) Prettier-Code formatter: only focus on formatting, do not have the ability to check syntax by eslint, and only care about format files (maximum length, mixed tags and spaces, reference styles, etc.), including JavaScript Flow TypeScript CSS SCSS Less JSX Vue GraphQL JSON Markdown

(4) Manta's Stylus Supremacy: a plug-in that formats stylus (if you don't use it), because vetur formats css with semicolons and curly braces, and this plug-in formats css into stylus style, like this

2. In the File-preferences-Settings of vscode, add the following code to the configuration on the right (the code has comments! ), which can be formatted with one button by pressing the Ctrl+S key directly

The code is as follows:

{/ / vscode enables the option to automatically set tabsize based on file type "editor.detectIndentation": false, / / reset tabsize "editor.tabSize": 2, / / # automatically format "editor.formatOnSave": true every time you save, / / # fix "eslint.autoFixOnSave": true in eslint format every time you save / / add vue to support "eslint.validate": ["javascript", "javascriptreact", {"language": "vue", "autoFix": true}], / / # Let prettier use eslint code format to verify "prettier.eslintIntegration": true / / # remove the semicolon "prettier.semi" at the end of the code: false, / / # use quotation marks instead of double quotation marks "prettier.singleQuote": true, / / # put a space between the function (name) and the following parentheses "javascript.format.insertSpaceBeforeFunctionParenthesis": true, / / # choose "vetur.format.defaultFormatter.html": "js-beautify-html" according to the user's custom / / # Let the js in vue format "vetur.format.defaultFormatter.js": "vscode-typescript", "vetur.format.defaultFormatterOptions": {"js-beautify-html": {"wrap_attributes": "force-aligned" / / # vue component html code format}}, / / format stylus Need to install the Manta's Stylus Supremacy plug-in "stylusSupremacy.insertColons": false, / / whether to insert the colon "stylusSupremacy.insertSemicolons": false, / / whether to insert the "stylusSupremacy.insertBraces": false, / / whether to insert the curly braces "stylusSupremacy.insertNewLineAroundImports": false, / / whether to wrap the line "stylusSupremacy.insertNewLineAroundBlocks": false / / whether to wrap in the two selectors} thank you for reading! This is the end of the article on "what does vscode eslint mean?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.