vue-cli+elementUI+项目报错处理+vscode用的插件

一、创建项目

1.先用vue ui 界面创建一个项目。

2.npm 安装

在项目根目录执行

npm i element-ui -S

3.在 vue ui面板中搜索到element插件安装

3.使用less的话还需要在vue ui界面中添加2个依赖

 

二、一些项目中的报错，和插件

.我这边在做项目遇到了一些lint的报错

1.1vue项目报错Expected indentation of 2 spaces but found 4

找到以下的文件，添加"indent": ["off", 2]

1.2还会有这种报错

error: Newline required at end of file but not found (eol-last) at vue

意思是必须有换行结尾，可是因为我VSCode里引用的插件JS-CSS-HTML Formatte，一保存就自动删除了最后一行。所以禁用了后。

VSCode安装一个ESLint插件,可以保存时自动修复为eslint的格式。

如果遇上保存时没有修复，自动格式为其它的东西，就是vetur插件的格式化问题，把这个格式化关了。

把eslint的格式化打开

 setting里加这个默认配置

"[vue]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },

 

如果觉得ESlint太烦就可以关掉。

方法如下：

在项目根目录下增加vue.config.js文件。

// vue.config.js
module.exports = {
    lintOnSave: false
}

1.3 另一个关于eslint的分号；规则，和单引号规则

1.4 eslint的 函数后面 必须 空格加括号的校验，禁用这个规则如下配置。

上图配置代码如下： 

module.exports = {
    root: true,
    env: {
        node: true
    },
    extends: [
        'plugin:vue/essential',
        '@vue/standard'
    ],
    parserOptions: {
        parser: 'babel-eslint'
    },
    rules: {
        indent: ['off', 2],
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'space-before-function-paren': 0
    }
}

 

3.这里附一些我目前用到的VSCode插件截图

 

 

我vscode setting.js的配置

{
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  "emmet.includeLanguages": {
    "wxml": "html"
  },
  "minapp-vscode.disableAutoConfig": true,
  "open-in-browser.default": "chrome",
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "cssrem.rootFontSize": 75,
  "css.fileExtensions": ["css", "wxss", "scss"],
  "css_peek.peekFromLanguages": [
    "html",
    "ejs",
    "erb",
    "php",
    "javascriptreact",
    "typescriptreact",
    "typescript",
    "javascript",
    "wxml",
    "vue"
  ],
  // 对EasyLess的配置，此段配置去掉则默认生成一个css文件
  "less.compile": {
    "relativeUrls": false,

    "compress": false, //是否压缩
    "sourceMap": false, //是否生成map文件
    "out": true, // 是否输出文件，false为不输出
    "outExt": ".css" // 输出文件的后缀,小程序可以写'wxss'
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[vue]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.formatOnType": true,

  "workbench.iconTheme": "vscode-icons",
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "vetur.format.defaultFormatter.html": "none",
  "eslint.run": "onSave",
  "eslint.format.enable": true,
  "vetur.format.enable": false
}

 

4.另外一些插件推荐

Auto Close Tag --------自动补全html标签

Auto Rename Tag --------同步更改html尾标签

HTML CSS Support css--------语法提示

HTML Snippets html--------标签提示

JavaScript (ES6) snippets ES6--------语法快捷键支持

language-stylus stylus --------语法提示

Stylus stylus CSS 语法提示--------主要支持vue文件下stylus

Path Autocomplete --------文件自动路径提示

VS Color Picker color: #fff --------自动提示

Vue 2 Snippets vue --------快捷键提示

eslint--------代码格式化

VueHelper --------可能是目前vscode最好的vue代码提示插件

vetur --------必备

参考了如下文章https://www.jianshu.com/p/15934d39ade1