vue重修之自定义项目、ESLint和代码规范修复

矫情吗；* 2024-02-21 11:21 17阅读 0赞

#### 文章目录 ####

*  VueCli 自定义创建项目
 *  ESlint代码规范及手动修复
 *  代码规范错误

## VueCli 自定义创建项目 ##

![在这里插入图片描述][9b3d4c6439374b9e8711e66aea4a4c32.png]

1.  安装脚手架 (已安装)

npm i @vue/cli -g

1.  创建项目
    
        vue create xxx
    
     *  选项
    
        Vue CLI v5.0.8
        ? Please pick a preset:
          Default ([Vue 3] babel, eslint)
          Default ([Vue 2] babel, eslint)
        > Manually select features     选自定义
    
     *  手动选择功能  
        ![在这里插入图片描述][d3a01f042f9f45c0b0a91ba90c5e242b.png]

*  选择vue的版本  
    ![f367dd81062947648ccd2471fb07f64d.png][]

*  是否使用history模式  
    ![在这里插入图片描述][444cf57ab8704bc488cdf5b6cb1724ba.png]
 *  选择css预处理  
    ![在这里插入图片描述][a399c7f241f643849d750b810dfdea77.png]
 *  选择eslint的风格 （eslint 代码规范的检验工具，检验代码是否符合规范）  
    ![在这里插入图片描述][c1e2b7fc512e4f9f96bb47f3657b6889.png]
 *  选择校验的时机 （直接回车）  
    ![在这里插入图片描述][c3638c569c6f4d5f9a911c585a5f6968.png]
 *  选择配置文件的生成方式 （直接回车）  
    ![在这里插入图片描述][abf5c5c780cd416db95f620552f4f803.png]
 *  是否保存预设，下次直接使用？ => 不保存，输入 N  
    ![在这里插入图片描述][140553731143446bb48c8500d89d1f73.png]
 *  启动项目
    
        npm run serve

## ESlint代码规范及手动修复 ##

*  \[JavaScript Standard Style 规范说明\] (https://standardjs.com/rules-zhcn.html)
 *  代码规范：一套写代码的约定规则.

## 代码规范错误 ##

*  如果代码不符合 standard 的要求，ESlint 会有提示  
    ![在这里插入图片描述][13723f1ca5134902b212008ca36048cb.png]
 *  两种解决方案：
    
    1.  手动修正
    
     *  根据错误提示来一项一项手动修改纠正。
     *  如果你不认识命令行中的语法报错是，根据错误代码去百度或者[ESLint规则表][ESLint]中查找其具体含义。
    
    1.  自动修正
    
     *  基于 vscode 插件 ESLint 高亮错误，并通过配置 自动 帮助我们修复错误。

![在这里插入图片描述][439a5a7633584456a93563eb66dc5573.png]

*  配置
    
        // 当保存的时候，eslint自动帮我们修复错误
        "editor.codeActionsOnSave": {
              
            "source.fixAll": true
        },
        // 保存代码，不自动格式化
        "editor.formatOnSave": false
 *  注意：eslint的配置文件必须在根目录下，这个插件才能才能生效。打开项目必须以根目录打开，一次打开一个项目
 *  settings.json 参考
    
        {
              
            "window.zoomLevel": 2,
            "workbench.iconTheme": "vscode-icons",
            "editor.tabSize": 2,
            "emmet.triggerExpansionOnTab": true,
            // 当保存的时候，eslint自动帮我们修复错误
            "editor.codeActionsOnSave": {
              
                "source.fixAll": true
            },
            // 保存代码，不自动格式化
            "editor.formatOnSave": false
        }

[9b3d4c6439374b9e8711e66aea4a4c32.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/d0b2edb83bc14344bd3f25856c15180e.png
[d3a01f042f9f45c0b0a91ba90c5e242b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/40dcd7a8e9954b52a06bfe4bc12d24de.png
[f367dd81062947648ccd2471fb07f64d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/b798cd54036246f684a2c0798450263d.png
[444cf57ab8704bc488cdf5b6cb1724ba.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/06779f312dcf4e02a30225a3804636a9.png
[a399c7f241f643849d750b810dfdea77.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/68650c2ed229495387895a3ef4458716.png
[c1e2b7fc512e4f9f96bb47f3657b6889.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/de87f8b5ca6b4474b65464aa0b66d474.png
[c3638c569c6f4d5f9a911c585a5f6968.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/1c316b22638c409f8ae914d2f0265e36.png
[abf5c5c780cd416db95f620552f4f803.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/336676e67f754f44a4cc50a895c5a4a7.png
[140553731143446bb48c8500d89d1f73.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/d7e785b7015648ffb907fabbb59673a4.png
[13723f1ca5134902b212008ca36048cb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/db57841c428744449967b7f96aa75152.png
[ESLint]: https://zh-hans.eslint.org/docs/latest/rules/
[439a5a7633584456a93563eb66dc5573.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/1aa033a2c3ee45998024867553319256.png