首页 > 其他 > 详细

在vscode中的vue单文件组件的代码提示以及自动符合Eslint规范

时间:2020-04-19 18:32:40      阅读:956      评论:0      收藏:0      [点我收藏+]

一、安装相关插件

更新于2020年4月19日18:07:34

一共要安装四个插件:分别是ESLint、Vetur、VueHelper、Prettier - Code formatter

VueHelper是代码自动提示的插件,我觉得用这个还是比较舒服的。

技术分享图片

二、在settings中添加这三个插件的相关配置

插一嘴:记得写注释,不然你后期想改的时候再看脑瓜子会炸。

    // Vetur插件的相关配置
    // "vetur.format.defaultFormatter.js": "none",
    "vetur.format.defaultFormatterOptions": {},
    "emmet.syntaxProfiles": {
        "vue-html""html",
        "vue""html"
    },
    "vetur.validation.template"false,
    "window.zoomLevel"0,
    "liveServer.settings.donotShowInfoMsg"true,
    "git.enableSmartCommit"true,
    "editor.minimap.enabled"false,
    "editor.renderWhitespace""all",
    "editor.renderControlCharacters"true,
    "breadcrumbs.enabled"true,
    "workbench.activityBar.visible"true,
    "explorer.confirmDelete"false,
    //   Eslint的配置
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ],
    "eslint.options": {
        "plugins": [
            "html"
        ]
    },
    "editor.codeActionsOnSave": {
        "source.fixAll"true,
        "source.fixAll.eslint"false
    },
    // prettier相关配置
    // tab 大小为2个空格
    "editor.tabSize"2,
    // 100 列后换行
    "editor.wordWrapColumn"100,
    // Ctrl + S 时格式化
    "editor.formatOnSave"true,
    // prettier 设置强制单引号
    "prettier.singleQuote"true,
    // prettier 设置语句末尾加分号
    "prettier.semi"false,
    // 选择 vue 文件中 template 的格式化工具
    "vetur.format.defaultFormatter.html""prettyhtml",
    // 让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis"true,
    // 让vue中的js按编辑器自带的ts格式进行格式化
    "vetur.format.defaultFormatter.js""vscode-typescript",
    // vetur 的自定义设置
    // Ctrl + Shift + F 快捷键设置(依照vetur格式化代码)
    "[vue]": {
        "editor.defaultFormatter""octref.vetur"
    }

三、在vue单文件组件中使用

在单文件组件中将代码变得不符合规范:

技术分享图片

 

 

 按下Ctrl + S 之后就会变得:

技术分享图片

 

 稍微符合规范一点。

我的eslint的配置文件如下:想看可以看看。


module.exports = {
  root: true,
  parser: ‘babel-eslint‘,
  parserOptions: {
  sourceType: ‘module‘,
  "allowImportExportEverywhere": true  //ignore eslint error: ‘import‘ and ‘export‘ may only appear at the top level
  },
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  extends: ‘eslint:recommended‘,
  // required to lint *.vue files
  plugins: [
    ‘html‘,
    ‘vue‘
  ],
  // add your custom rules here
  //it is base on https://github.com/vuejs/eslint-config-vue
  ‘rules‘: {
    ‘accessor-pairs‘: 2,
    ‘arrow-spacing‘: [2, {
      ‘before‘: true,
      ‘after‘: true
    }],
    ‘block-spacing‘: [2‘always‘],
    ‘brace-style‘: [2‘1tbs‘, {
      ‘allowSingleLine‘: true
    }],
    ‘camelcase‘: [0, {
      ‘properties‘: ‘always‘
    }],
    ‘comma-dangle‘: [2‘never‘],
    ‘comma-spacing‘: [2, {
      ‘before‘: false,
      ‘after‘: true
    }],
    ‘comma-style‘: [2‘last‘],
    ‘constructor-super‘: 2,
    ‘curly‘: [2‘multi-line‘],
    ‘dot-location‘: [2‘property‘],
    ‘eol-last‘: 2,
    ‘eqeqeq‘: [2‘allow-null‘],
    ‘generator-star-spacing‘: [2, {
      ‘before‘: true,
      ‘after‘: true
    }],
    ‘handle-callback-err‘: [2‘^(err|error)$‘],
    ‘indent‘: [22, {
      ‘SwitchCase‘: 1
    }],
    ‘jsx-quotes‘: [2‘prefer-single‘],
    ‘key-spacing‘: [2, {
      ‘beforeColon‘: false,
      ‘afterColon‘: true
    }],
    ‘keyword-spacing‘: [2, {
      ‘before‘: true,
      ‘after‘: true
    }],
    ‘new-cap‘: [2, {
      ‘newIsCap‘: true,
      ‘capIsNew‘: false
    }],
    ‘new-parens‘: 2,
    ‘no-array-constructor‘: 2,
    ‘no-caller‘: 2,
    ‘no-console‘: ‘off‘,
    ‘no-class-assign‘: 2,
    ‘no-cond-assign‘: 2,
    ‘no-const-assign‘: 2,
    ‘no-control-regex‘: 0,
    ‘no-delete-var‘: 2,
    ‘no-dupe-args‘: 2,
    ‘no-dupe-class-members‘: 2,
    ‘no-dupe-keys‘: 2,
    ‘no-duplicate-case‘: 2,
    ‘no-empty-character-class‘: 2,
    ‘no-empty-pattern‘: 2,
    ‘no-eval‘: 2,
    ‘no-ex-assign‘: 2,
    ‘no-extend-native‘: 2,
    ‘no-extra-bind‘: 2,
    ‘no-extra-boolean-cast‘: 2,
    ‘no-extra-parens‘: [2‘functions‘],
    ‘no-fallthrough‘: 2,
    ‘no-floating-decimal‘: 2,
    ‘no-func-assign‘: 2,
    ‘no-implied-eval‘: 2,
    ‘no-inner-declarations‘: [2‘functions‘],
    ‘no-invalid-regexp‘: 2,
    ‘no-irregular-whitespace‘: 2,
    ‘no-iterator‘: 2,
    ‘no-label-var‘: 2,
    ‘no-labels‘: [2, {
      ‘allowLoop‘: false,
      ‘allowSwitch‘: false
    }],
    ‘no-lone-blocks‘: 2,
    ‘no-mixed-spaces-and-tabs‘: 2,
    ‘no-multi-spaces‘: 2,
    ‘no-multi-str‘: 2,
    ‘no-multiple-empty-lines‘: [2, {
      ‘max‘: 1
    }],
    ‘no-native-reassign‘: 2,
    ‘no-negated-in-lhs‘: 2,
    ‘no-new-object‘: 2,
    ‘no-new-require‘: 2,
    ‘no-new-symbol‘: 2,
    ‘no-new-wrappers‘: 2,
    ‘no-obj-calls‘: 2,
    ‘no-octal‘: 2,
    ‘no-octal-escape‘: 2,
    ‘no-path-concat‘: 2,
    ‘no-proto‘: 2,
    ‘no-redeclare‘: 2,
    ‘no-regex-spaces‘: 2,
    ‘no-return-assign‘: [2‘except-parens‘],
    ‘no-self-assign‘: 2,
    ‘no-self-compare‘: 2,
    ‘no-sequences‘: 2,
    ‘no-shadow-restricted-names‘: 2,
    ‘no-spaced-func‘: 2,
    ‘no-sparse-arrays‘: 2,
    ‘no-this-before-super‘: 2,
    ‘no-throw-literal‘: 2,
    ‘no-trailing-spaces‘: 2,
    ‘no-undef‘: 2,
    ‘no-undef-init‘: 2,
    ‘no-unexpected-multiline‘: 2,
    ‘no-unmodified-loop-condition‘: 2,
    ‘no-unneeded-ternary‘: [2, {
      ‘defaultAssignment‘: false
    }],
    ‘no-unreachable‘: 2,
    ‘no-unsafe-finally‘: 2,
    ‘no-unused-vars‘: [2, {
      ‘vars‘: ‘all‘,
      ‘args‘: ‘none‘
    }],
    ‘no-useless-call‘: 2,
    ‘no-useless-computed-key‘: 2,
    ‘no-useless-constructor‘: 2,
    ‘no-useless-escape‘: 0,
    ‘no-whitespace-before-property‘: 2,
    ‘no-with‘: 2,
    ‘one-var‘: [2, {
      ‘initialized‘: ‘never‘
    }],
    ‘operator-linebreak‘: [2‘after‘, {
      ‘overrides‘: {
        ‘?‘: ‘before‘,
        ‘:‘: ‘before‘
      }
    }],
    ‘padded-blocks‘: [2‘never‘],
    ‘quotes‘: [2‘single‘, {
      ‘avoidEscape‘: true,
      ‘allowTemplateLiterals‘: true
    }],
    ‘semi‘: [2‘never‘],
    ‘semi-spacing‘: [2, {
      ‘before‘: false,
      ‘after‘: true
    }],
    ‘space-before-blocks‘: [2‘always‘],
    ‘space-before-function-paren‘: [2‘never‘],
    ‘space-in-parens‘: [2‘never‘],
    ‘space-infix-ops‘: 2,
    ‘space-unary-ops‘: [2, {
      ‘words‘: true,
      ‘nonwords‘: false
    }],
    ‘spaced-comment‘: [2‘always‘, {
      ‘markers‘: [‘global‘‘globals‘‘eslint‘‘eslint-disable‘‘*package‘‘!‘‘,‘]
    }],
    ‘template-curly-spacing‘: [2‘never‘],
    ‘use-isnan‘: 2,
    ‘valid-typeof‘: 2,
    ‘wrap-iife‘: [2‘any‘],
    ‘yield-star-spacing‘: [2‘both‘],
    ‘yoda‘: [2‘never‘],
    ‘prefer-const‘: 2,
    ‘no-debugger‘: process.env.NODE_ENV === ‘production‘ ? 2 : 0,
    ‘object-curly-spacing‘: [2‘always‘, {
      objectsInObjects: false
    }],
    ‘array-bracket-spacing‘: [2‘never‘]
  }
}

 

 

 

 // Vetur插件的相关配置
    "vetur.format.defaultFormatter.js""none",
    "vetur.format.defaultFormatterOptions": {},
    "emmet.syntaxProfiles": {
        "vue-html""html",
        "vue""html"
    },
    "vetur.validation.template"false,
    "window.zoomLevel"0,
    "liveServer.settings.donotShowInfoMsg"true,
    "git.enableSmartCommit"true,
    "editor.minimap.enabled"false,
    "editor.renderWhitespace""all",
    "editor.renderControlCharacters"true,
    "breadcrumbs.enabled"true,
    "workbench.activityBar.visible"true,
    "explorer.confirmDelete"false,
     //   Eslint的配置
     "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ],
    "eslint.options": {
        "plugins": [
            "html"
        ]
    }

在vscode中的vue单文件组件的代码提示以及自动符合Eslint规范

原文:https://www.cnblogs.com/Guorisy/p/12732651.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!