VScode编辑vue配置

约定不等于承诺〃 2023-03-03 06:29 14阅读 0赞

# 中文显示 #

Ctrl+shift+P选择Configure Display Language

![20200730151342375.png][]

![20200730151414226.png][]

# eslint-plugin-vue 自动修复eslint报错 #

安装插件npm i -g eslint-plugin-vue

![20200730152540312.png][]

## **添加EsLint** **和 Vetur** **插件** ##

**Vetur** —— 语法高亮、智能感知、Emmet等  
包含格式化功能， Alt+Shift+F （格式化全文），Ctrl+K Ctrl+F（格式化选中代码，两个Ctrl需要同时按着）

**EsLint** —— 语法纠错

![20200730152909250.png][]

**修改vscode首选项配置**

ctrl +shift +p

![20200730154038900.png][]

{
        "editor.formatOnSave": true,
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true
        },
        "eslint.format.enable": true,
        "[vue]": {
            "editor.defaultFormatter": "dbaeumer.vscode-eslint"
        }
    }

![20200730154419885.png][]

格式化代码会自动修复语法错误

### MAC格式化简单配置 ###

安装ESLint和vue插件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0ZXZlX2ZyYW5r_size_16_color_FFFFFF_t_70][]

开启Eslint格式化

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0ZXZlX2ZyYW5r_size_16_color_FFFFFF_t_70 1][]

Shift + Option + F格式化

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0ZXZlX2ZyYW5r_size_16_color_FFFFFF_t_70 2][]

[20200730151342375.png]: /images/20230208/ad839ed7dba24b53b25ce7c3925bdfe5.png
[20200730151414226.png]: /images/20230208/45b183f42b7a499fbd0372aa3f500747.png
[20200730152540312.png]: /images/20230208/f696ae2b47d64dd8a6a85d4cfc5dedf9.png
[20200730152909250.png]: /images/20230208/01e01c8b5c414be1a97dfda5e6202b47.png
[20200730154038900.png]: /images/20230208/d36b6d3ca7be487f9efe510c7d666f29.png
[20200730154419885.png]: /images/20230208/a65721f048134dd0801bb077af04e0fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0ZXZlX2ZyYW5r_size_16_color_FFFFFF_t_70]: /images/20230208/3a8a4509084c4cde90e12e0364645149.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0ZXZlX2ZyYW5r_size_16_color_FFFFFF_t_70 1]: /images/20230208/82a56cfd0ed946cb847b2fb21a5409d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0ZXZlX2ZyYW5r_size_16_color_FFFFFF_t_70 2]: /images/20230208/5e96c92af1584185b86d6d78a4a1931b.png