每日学习 # 7-3 vue的eslinst相关问题

上午&下午&晚上

十点到工作室开始学习，看了脚手架的视频之后，就一直在和报错斗争，我一开始还搞不明白，明明是初始能运行的东西，加了个空格之后就不能运行了。而且还爆出七八个错误，然后一直在尝试用新的初始文件来尝试，然后发现都是在router路由上出的问题，之后一直在找是不是路由配置错误。

后面发现是自己ctrl+s之后才出现这个问题，于是我就把vscode的几个修改代码格式的插件关闭掉

之后空格保存并没有问题。

然后我就接着写了，然后写着写着还是报错了，

因为是刚开始写vue，所以我也没有直接复制粘贴到百度问，加上我的文件夹和视频里的不一样，我就自己在那折磨自己。

后面才意识到是格式问题。

之后就一点点耐心的改格式，发现效率太低了，之后找到了一个方法

https://www.jianshu.com/p/23a5d6194a4b

参考地址

在用vue cli脚手架开发之前，我们需要配置一下插件以适应eslint格式，这个格式十分严格，当我们多个空格，或者缩进行数不对的时候都会报错，

23:1 error Expected indentation of 2 spaces but found 4 indent

24:1 error Expected indentation of 2 spaces but found 4 indent

24:9 error Missing space before function parentheses space-before-function-paren

24:11 error Missing space before opening brace space-before-blocks

25:1 error Expected indentation of 4 spaces but found 8 indent

25:9 error Expected space(s) after "return" keyword-spacing

26:1 error Expected indentation of 6 spaces but found 12 indent

26:18 error Missing space before value for key 'user' key-spacing

所以需要去适配，我们需要把我们之前那些按ctrl+s时候自动调整代码样式的插件都删除掉。

然后再去安装插件

1、安装插件

1）ESlint：javascript代码检测工具，可以配置每次保存时格式化js，但每次保存只格式化一点点，你得连续按住Ctrl+S好几次,才格式化好，自行体会~~

2）vetur：可以格式化html、标准css（有分号 、大括号的那种）、标准js（有分号 、双引号的那种）、vue文件，

但是！格式化的标准js文件不符合ESlint规范，会给你加上双引号、分号等

3）Prettier - Code formatter：只关注格式化，并不具有eslint检查语法等能力，只关心格式化文件(最大长度、混合标签和空格、引用样式等)，包括JavaScript · Flow · TypeScript · CSS · SCSS · Less · JSX · Vue · GraphQL · JSON · Markdown

4）Manta's Stylus Supremacy： 格式化stylus的插件（这个不用就不装），因为vetur会把css格式化有分号 、大括号的那种，此插件会把css格式化成stylus风格，

2、在vscode的文件-首选项-设置里，右侧配置里添加如下代码即可（代码有注释！），从此直接 Ctrl+S 就能一键格式化了

搜索setting

找到这个，不管在哪里，这个配置都是一样的只需要找到settings.json就行

在{}中间添加

     // vscode默认启用了根据文件类型自动设置tabsize的选项
    "editor.detectIndentation": false,
    // 重新设定tabsize
    "editor.tabSize": 2,
    // #每次保存的时候自动格式化 
    "editor.formatOnSave": true,
    // #每次保存的时候将代码按eslint格式进行修复
    "eslint.autoFixOnSave": true,
    // 添加 vue 支持
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    //  #让prettier使用eslint的代码格式进行校验 
    "prettier.eslintIntegration": true,
    //  #去掉代码结尾的分号 
    "prettier.semi": false,
    //  #使用带引号替代双引号 
    "prettier.singleQuote": true,
    //  #让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    // #这个按用户自身习惯选择 
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    // #让vue中的js按编辑器自带的ts格式进行格式化 
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-aligned"
            // #vue组件中html代码格式化样式
        }
    },
    // 格式化stylus, 需安装Manta's Stylus Supremacy插件
    "stylusSupremacy.insertColons": false, // 是否插入冒号
    "stylusSupremacy.insertSemicolons": false, // 是否插入分好
    "stylusSupremacy.insertBraces": false, // 是否插入大括号
    "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
    "stylusSupremacy.insertNewLineAroundBlocks": false // 两个选择器中是否换行

提示框直接选yes就行

之后再直接ctrl+s就会自动修正成eslinst需要的格式