Vscode saves code and automatically formats the code Settings according to the ESLint specification

The editor code is consistent and part of the front-end code specification. If you use vscode+ ESLint for autosave, you can automatically format your code. If you use vscode+ ESLint for autosave, you can automatically format your code.

First you need to install some vscode plug-ins

Eslint, Vetur, Prettier Now, for details see the previous article on Prettier.

Install the VSCode plug-in

After the installation, you need to configure ESLint. Open the ESLint configuration file (there is a setting in the lower left corner, click search settings.json).

Open settings.jons, paste the following configuration, be careful not to replace your original VSCode theme, font, etc

{
  "workbench.colorTheme": "One Monokai"."editor.fontSize": 14."workbench.editor.enablePreview": true, // The preview mode is closed"editor.formatOnSave": true, / /# Automatically format every time you save// Automatic repair"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,},"eslint.enable": true, // Whether to enable ESLint for VScode // Configure the types of files esLint checks"eslint.validate": [
    "javascript"."vue"."html"]."eslint.options": {// Specifies the suffix for files that vscode's ESLint will handle"extensions": [
      ".js".".vue".".ts".".tsx"]},"files.associations": {
    "*.wpy": "vue"."*.wxml": "wxml"."*.cjson": "jsonc"."*.wxss": "css"."*.wxs": "javascript"."*.html": "html"
  },
  "emmet.includeLanguages": {
    "wxml": "html"
  },
  "minapp-vscode.disableAutoConfig": true// vscode is enabled by default to automatically set tabsize by file type"editor.detectIndentation": false, // Reset the tabsize"editor.tabSize": / / 2Remove the semicolon at the end of the code
  "prettier.semi": false, / /Use single quotes instead of double quotes
  "prettier.singleQuote": true, / /Insert a space between the function (name) and the following parentheses
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, / /Let js in vue be formatted in the editor's ts format
  "vetur.format.defaultFormatter.js": "vscode-typescript"."git.enableSmartCommit": true."editor.quickSuggestions": {
    "strings": true}, / / must be in vutur defaultFormatterOptions parameter Settings, modify prettier extension set alone can't solve this problem, because perttier default is ignoring the vue file (in fact, from the ignore list vue cannot solve this problem)"vetur.format.defaultFormatterOptions": {

    "prettier": {
      "semi": false, // Format without a semicolon"singleQuote": true},"js-beautify-html": {
      // force-aligned | force-expand-multiline
      "wrap_attributes": "force-aligned"
    },
    "prettyhtml": {
      "printWidth": 100,
      "singleQuote": false."wrapAttributes": false."sortAttributes": true- CRTL + Alt + I (window), CTRL + CMD + T (MAC)"fileheader.customMade": {
    "Descripttion": "", / /"version": ""."Author": "voanit"."Date": "Do not edit"."LastEditors": "voanit"."LastEditTime": "Do not Edit"}, // Function comments - shortcut keys CTRL + Alt +t(window), CTRL + Alt +t(MAC)"fileheader.cursorMode": {
    "name": "", / /"test": "test font", / /"msg": ""."param": ""."return": ""}, // Install the Live Server plug-in"liveServer.settings.donotVerifyTags": true."liveServer.settings.donotShowInfoMsg": true."liveServer.settings.NoBrowser": true."liveServer.settings.CustomBrowser": "chrome", // Set the default browser to open"liveServer.settings.host": "127.0.0.1"."liveServer.settings.port": 5000, // Set the port number of the local service"liveServer.settings.root": "/distserver"."[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "javascript.updateImportsOnFileMove.enabled": "never"."javascript.implicitProjectConfig.experimentalDecorators": true."workbench.editor.showTabs": true."terminal.integrated.rendererType": "dom"."sync.gist": "396472a5bb443e3680d5a0e2ffccefe8"."window.zoomLevel": 0."diffEditor.ignoreTrimWhitespace": false."launch": {},
  "[jsonc]": {
    "editor.defaultFormatter": "remimarsal.prettier-now"
  },
  "[typescript]": {
    "editor.defaultFormatter": "remimarsal.prettier-now"
  },
  "json.schemas": [{"fileMatch": [
        "/myfile"]."url": "schemaURL"}}]Copy the code

From there, you can happily use the autosave ESLint format.

Note: the author installed prettier Now cooperate eslint used, the above configuration will exist eslint and prettier Now conflict, need to be in. Eslintrc. Js configuration extends inside: [‘prettier-now’], perttier-now must be placed last so that esLint overwrites the formatting

At the end of eggs

Welcome to pay attention to the front stage of the public number, get more front-end knowledge, join the front group, make friends with the famous Internet tycoon, open a new chapter of learning together!