vue 使用 eslint

超、凢脫俗 2023-06-13 08:54 4阅读 0赞

新项目在安装的时候选择  eslint 就会自动生成

旧项目使用

## **1、安装一个新项目使用 eslint ，然后把根目录的 .eslintrc.js 文件 和 .editorconfig 文件复制到旧项目根目录** ##

## **2、把新项目里面的 package.json 里面有关 eslint 的内容都复制到旧项目的 package.json 里面，然后 npm install 下载这些配置** ##

"devDependencies": {
        ……    
    
        "eslint": "^4.15.0",
        "eslint-config-standard": "^10.2.1",
        "eslint-friendly-formatter": "^3.0.0",
        "eslint-loader": "^1.7.1",
        "eslint-plugin-import": "^2.7.0",
        "eslint-plugin-node": "^5.2.0",
        "eslint-plugin-promise": "^3.4.0",
        "eslint-plugin-standard": "^3.0.1",
        "eslint-plugin-vue": "^4.0.0"，
    
        ……
    }

## **3、在配置文件 webpack.base.conf.js 里面加上对 vue 的解析** ##

{
            test: /\.(js|vue)$/,
            loader: 'eslint-loader',
            enforce: 'pre',
            include: [resolve('src'), resolve('test')],
            options: {
              formatter: require('eslint-friendly-formatter')
            }
          }

## **4、vscode 编辑器保存自动格式化为 eslint 格式** ##

1. 先下载 eslint 插件

2.在vscode的文件-首选项-设置里，查找eslint，点击在setting.json 里面编辑，配置里添加如下代码即可（代码有注释！），从此直接 Ctrl+S 就能一键格式化了

// 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
        }
      ],
      //  #让函数(名)和后面的括号之间加个空格
      "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代码格式化样式
        },
    
      }

3.设置代码后面强制加分号

在vue根目录的  .eslintrc.js 文件的 rules 文件里面添加一个 'semi': \['error', 'always'\], 如下

rules: {
            // allow async-await
            'generator-star-spacing': 'off',
            // allow debugger during development
            'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
            'semi': ['error', 'always'], //添加这一项
        }