vue配置项目按eslint规范格式化代码

桃扇骨 2022-12-08 01:50 312阅读 0赞

#### 配置项目按eslint规范格式化代码 ####

1.  vscode下载ESlint, Prettier, Vetur插件
2.  打开vscode的设置，选择ESLint扩展程序，之后在setting.json中编辑  
    ![在这里插入图片描述][20200917103834120.png_pic_center]
3.  添加如图配置

{ 
        "editor.formatOnSave": true,
        "eslint.alwaysShowStatus": true,
        "editor.codeActionsOnSave": { 
           "source.fixAll.eslint": true,
        },
        "editor.formatOnType": true,
        "eslint.format.enable": true,
        "eslint.validate": [
            "javascript",
            "javascriptreact",
            "vue"
        ],
        "editor.fontFamily": "JetBrains Mono, 'Courier New', monospace",
        "editor.fontSize": 19,
        "editor.tabSize": 2,
        "prettier.semi": false,
        "prettier.singleQuote": true,
        "[vue]": { 
            "editor.codeActionsOnSave": { 
                "source.fixAll.eslint": true
            },
            "editor.defaultFormatter": "esbenp.prettier-vscode"
        },
        "[javascript]": { 
            "editor.codeActionsOnSave": { 
                "source.fixAll.eslint": true
            },
            "editor.defaultFormatter": "esbenp.prettier-vscode"
        },
        "explorer.confirmDelete": false,
        "editor.fontWeight": "normal",
        "editor.suggestSelection": "first",
        "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
        "python.showStartPage": false,
        "eslint.codeAction.showDocumentation": { 
    
    
            "enable": true
        },
    }

1.  在.eslintrc中覆盖prettier规则即可，覆盖是为了防止冲突(可以自定义eslint的一些规则)

module.exports = { 
      root: true,
      env: { 
        node: true
      },   
      extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/prettier'],
      parserOptions: {    
        parser: 'babel-eslint'
      },
      rules: { 
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'prettier/prettier': [
          'error',
          { 
            semi: false,
            singleQuote: true,
            printWidth: 160
          }
        ]
      }
    }

1.  配置完成之后执行npm run lint格式所有代码

[20200917103834120.png_pic_center]: /images/20221123/bf01745e62c14112b60414a9a8364fff.png