美文网首页
Vscode中点击自动eslint格式化和prettier搭配

Vscode中点击自动eslint格式化和prettier搭配

作者: 颂温暖 | 来源:发表于2021-10-29 17:17 被阅读0次

    eslint规则只是限制我们在写代码时候的标准化,尤其是在团队开发中成员的代码一致性,如果大家都是自己的标准,那么写出的项目将没有办法进行阅读,不利于后期的二次开发

    vscode自动格式化

    而vscode写项目时候保存文件自动eslint格式化是在 文件 --> 首选项 -- > 设置中找到settings.json中进行设置,下面是代码块

    添加这两句代码,就可以了

    // 新版支持
        // 语言标识符的数组,为此ESLint扩展应被激活,并应尝试验证文件。
        "eslint.probe": [
            "javascript",
            "javascriptreact",
            "vue-html",
            "vue",
            "html"
        ],
    // 保存时对运行的代码进行eslint规则自动修复
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true
        },
    

    下面是我平常开发中使用到的vscode配置

    {
        // 项目颜色主题
        "workbench.colorTheme": "Dracula",
        // 项目文件图标主题
        "workbench.iconTheme": "material-icon-theme",
        // 每次保存的时候自动格式化
        "editor.formatOnSave": true,
        // 可视区域内是否自动换行
        "editor.wordWrap": "on",
        // 老版支持
        // "eslint.autoFixOnSave": true, //  启用保存时自动修复,默认只支持.js文件
        // "eslint.validate": [
        //     "javascript", //  用eslint的规则检测js文件
        //     "vue",  // 用eslint规则检测vue文件
        //     "html", // 用eslint规则检测html文件
        // ],
        // 新版支持
        // 语言标识符的数组,为此ESLint扩展应被激活,并应尝试验证文件。
        "eslint.probe": [
            "javascript",
            "javascriptreact",
            "vue-html",
            "vue",
            "html"
        ],
        // 保存时对运行的代码进行eslint规则自动修复
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true,
            "source.fixAll.stylelint": true
        },
        // 字体大小
        "editor.fontSize": 16,
        // 设置字体
        "editor.fontFamily": "'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'",
        // tab 一个制表符等于的空格数
        "editor.tabSize": 4,
        // 控制编辑器是否显示内联颜色修饰器和颜色选取器
        "editor.colorDecorators": true,
        // 控制编辑器是否启用了代码折叠
        "editor.folding": true,
        // 代码行高,0自动计算,8作为倍数
        "editor.lineHeight": 24,
        // 是否显示行号
        "editor.lineNumbers": "on",
        // 控制编辑器是否自动格式化粘贴的内容,格式化程序要可用,并且针对文档中的某一范围进行格式化
        "editor.formatOnPaste": true,
        // 控制是否在编辑器中显示CodeLens
        "diffEditor.codeLens": true,
        // 控制是否显示缩略图
        "editor.minimap.enabled": true,
        // 控制自动保存未保存的编辑器文件,onFocusChange切换文件时保存,afterDelay操作代码之后保存,onWindowChange切换编辑器之后保存
        "files.autoSave": "onFocusChange"
    }
    

    vue项目中.eslintrc.js文件配置(仅个人使用)---这里的配置,是上面vscode配置执行的标准

    module.exports = {
      root: true,
      env: {
        node: true,
        browser: true,
        commonjs: true,
        es6: true,
        amd: true,
        jquery: true
      },
      extends: [
        'plugin:vue/vue3-essential',
        'plugin:vue/base',
        '@vue/standard',
        "eslint:recommended"
      ],
      parserOptions: {
        parser: 'babel-eslint',
        sourceType: 'module'
      },
      rules: {
        // console判断
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        // debugger是否使用
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        // 禁用 alert、confirm 和 prompt
        'no-alert': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        // 这条验证目前只知道可以去除pubilc里面的index.html的规则报错,具体意思不清楚
        // 貌似关闭在模版中使用 eslint-disable-next-line 等注释
        'vue/comment-directive': 'off',
        // eslint规则子组件不能修改props值得问题
        'vue/no-mutating-props': 'off',
        // notab--忽略用于缩进的tab
        'no-tabs': ['error', { allowIndentationTabs: true }],
        // 方法名小括号之后没有空格
        'space-before-function-paren': 'off',
        // 禁止在条件表达式中使用赋值运算符
        'no-cond-assign': 'error',
        // 禁止与-0去比较
        'no-compare-neg-zero': 'error',
        // 禁止在循环中出现 await
        'no-await-in-loop': 'error',
        // 强制 getter 函数中出现 return 语句
        'getter-return': 'error',
        // 强制 “for” 循环中更新子句的计数器朝着正确的方向移动
        'for-direction': 'error',
        // 禁止 function 定义中出现重名参数
        'no-dupe-args': 'error',
        // 禁止对象字面量中出现重复的 key
        'no-dupe-keys': 'error',
        // 禁止出现重复的 case 标签
        'no-duplicate-case': 'error',
        // 禁止出现空语句块
        'no-empty': 'error',
        // 禁止对 catch 子句的参数重新赋值
        'no-ex-assign': 'error',
        // 禁止不必要的布尔转换
        'no-extra-boolean-cast': 'error',
        // 禁止不必要的括号
        'no-extra-parens': 'error',
        // 禁止不必要的分号
        'no-extra-semi': 'error',
        // 禁止对 function 声明重新赋值
        'no-func-assign': 'error',
        // 要求使用 === 和 !==
        'eqeqeq': 'error',
        // 强制 typeof 表达式与有效的字符串进行比较
        'valid-typeof': 'error',
        // 要求使用 isNaN() 检查 NaN
        'use-isnan': 'error',
        // 禁止出现空函数
        'no-empty-function': 'error',
        // 禁止使用空解构模式
        'no-empty-pattern': 'error',
        // 禁止在没有类型检查操作符的情况下与 null 进行比较
        'no-eq-null': 'error',
        // 禁止使用多个空格
        'no-multi-spaces': 'error',
        // 禁止使用多行字符串
        'no-multi-str': 'error',
        // 禁止多次声明同一变量
        'no-redeclare': 'error',
        // 禁止自我赋值
        'no-self-assign': 'error',
        // 禁止自身比较
        'no-self-compare': 'error',
        // 要求或禁止 var 声明中的初始化
        "init-declarations": ["error", "always"],
        // 禁用未声明的变量,除非它们在 /*global */ 注释中被提到
        'no-undef': 'error',
        // 禁止将变量初始化为 undefined
        'no-undef-init': 'error',
        // 禁止出现未使用过的变量
        'no-unused-vars': 'error',
        // 禁止在变量定义之前使用它们
        'no-use-before-define': 'error',
        // 禁止出现未使用过的变量
        'no-unused-vars': 'error',
        // 是否允许非空数组里面有多余的空格
        'array-bracket-spacing': ['error', 'never'],
        // 要求箭头函数的参数使用圆括号
        'arrow-parens': 'error',
        // 强制驼峰法命名
        'camelcase': 'error',
        // this别名that
        'consistent-this': ['error', 'that'],
        // 必须使用 if(){} 中的{}
        'curly': ['error', 'all'],
        // 缩进风格
        'indent': ['error', 2],
        // 要求在注释周围有空行
        'lines-around-comment': 'off',
        // 函数最多只能有3个参数
        'max-params': ['off', 4],
        // 函数内最多有几个声明
        'max-statements': ['off', 10],
        // 禁止在代码后使用内联注释
        'no-inline-comments': 'off',
        // 换行风格-强制使用一致的换行符风格
        'linebreak-style': ['off', 'windows'],
        // 禁止将全局对象当作函数进行调用
        'no-obj-calls': 'error',
        // 禁止对函数参数再赋值
        'no-param-reassign': 'error',
        // 不允许使用undefined变量 
        'no-undefined': 'error',
        // 禁止使用令人困惑的多行表达式
        'no-unexpected-multiline': 'error',
        // 要求将变量声明放在它们作用域的顶部
        'vars-on-top': 'error'
      }
    }
    
    
    
    

    然后就是和prettier搭配使用

    1.vscode搜索扩展工具prettier并安装
    2.在项目中新建".prettierrc文件",并添加规则,格式如下

    {
      "semi": false,
      "singleQuote": true,
      "trailingComma": "none"
    }
    

    3.在文件->首选项->设置中 搜索save找到Editor:Format On Save并勾选

    完成这3步基本上就配置完成了,但是prettier和eslint本身会有冲突的地方,需要修改一些地方
    1).prettier和eslint冲突问题解决:打开.eslintrc.js, 在rules规则下,添加代码

    rules: {
      'space-before-function-paren': 'off'
    }
    

    2).如果安装了多个代码格式化工具,那么在页面保存的时候,右键->使用...格式化文档,然后配置默认prettier格式化文件就行了

    3).在打开项目->public->index.html或者.html的文件时,会在代码结构的末尾报错 'vue/comment-directive': 'off', 解决办法:在.eslintrc.js文件中添加规则:

    rules: {
      // 这条验证目前只知道可以去除pubilc里面的index.html的规则报错,具体意思不清楚
        // 貌似关闭在模版中使用 eslint-disable-next-line 等注释
        'vue/comment-directive': 'off',
    }
    

    4).在项目中,会遇到一个问题,子组件通过props获取到父组件的值,子组件通过v-modal修改,eslint报错的问题,解决办法:

    rules: {
      // eslint规则子组件不能修改props值得问题
        'vue/no-mutating-props': 'off',
    }
    

    相关文章

      网友评论

          本文标题:Vscode中点击自动eslint格式化和prettier搭配

          本文链接:https://www.haomeiwen.com/subject/fynialtx.html