uniapp配置eslint + prettier +edit

2020-11-02  本文已影响0人  云鹤道人张业斌

目标：给新建的uniapp项目增加语法规范和保存自动格式化代码，有不对的欢迎指正

2020-11-4日新增

今日看到各种黄色波浪线都来自一个eslint-plugin-vue这个插件，只用eslint + eslint-plugin-vue这两个插件就足够用了，简单明了三步走

1.第一步

npm i eslint  eslint-plugin-vue -D
npm i babel-eslint eslint-plugin-node -D // 这两个在配置中可用可不用

2.第二步: 新建.eslintrc.js 文件，极简配置即可。

新建的.eslintrc.js 文件中
module.exports = {
  extends: [
    'plugin:vue/recommended',
    'eslint:recommended'
  ],
  globals: { uni: true, wx: true },
  rules: {
    "no-mixed-spaces-and-tabs": ["error", "smart-tabs"]
// 还有很多js规则去github上找项目vue-element-admin上搞一份
  },
  env: {
    es6: true,
    browser: true,
    node: true
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

或者可以直接放在packag.json中都行，参考脚手架生成的vue项目

packag.json 文件中
 "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
       'plugin:vue/recommended',
    'eslint:recommended'
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },

3.第三步：.vscode文件settings.json用下面的配置即可

{
  // "vetur.validation.template": false, // 把 vetur 扩展的 template 格式化去掉
  "editor.formatOnSave": false,
  "eslint.enable": true, // eslint 格式化的配置
  "eslint.run": "onType",
  "editor.tabSize": 2,
  "editor.autoClosingQuotes": "always",
  "javascript.preferences.quoteStyle": "single",
  "workbench.iconTheme": "vscode-icons",
  "editor.codeActionsOnSave": {
    // For ESLint
    "source.fixAll.eslint": true,
    // For TSLint
    "source.fixAll.tslint": true,
    // For Stylelint
    "source.fixAll.stylelint": true
  },
  "eslint.options": {
    "extensions": [".js", ".vue"]
  }
}

以下内容选择性浏览

2020-11-1新建

问：为什么是eslint + prettier
答： 这两者都有规范代码的作用，ESLint 主要解决的是代码质量问题，例如使用cost或者let替代var；Prettier 认为格式很重要，比如规定用单引号和或双引号。想要双剑合璧，去掉两者使用中的冲突，使用起来就完美了

问：editorconfig， lint-staged是什么
答：1. 不同的编辑器和系统在编码上一些操作会有不同，比如：缩进是tab还是space，结尾end_of_line是lf还是crlf（editorconfig的能力 —— 用于覆盖编辑器的默认配置）

  1. lint-staged 用于对 Git 暂存区中的文件执行代码检测，结合husky 用到 pre-commit这个 hook，在执行 commit 之前，可以运行一些自定义操作

1.在插件市场安装要用到的插件，注意：再加个vetur 如下图

企业微信截图_16042994154716.png

2.新建下图中需要用到的文件

[图片上传中...(企业微信截图_16042994154716.png-992558-1604299420862-0)]

editorconfig 大致配置，不建议深究，能用就行

# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = crlf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab

# editorconfig-tools is unable to ignore longs strings or urls
max_line_length = null

问： 怎么生成.vscode文件
答：编辑器左下角设置按钮，随便改个设置就会在项目生成该文件夹

3. 下载要用到的包

npm i eslint prettier eslint-plugin-prettier eslint-config-prettier  -D

eslint-config-prettier ：关掉 (disable) 所有和 Prettier 冲突的 ESLint 的配置
eslint-plugin-prettier ： 把 Prettier 推荐的格式问题的配置以 ESLint rules 的方式写入，这样相当于可以统一代码问题的来源

问：怎么关掉冲突呢
答：在 .eslintrc.js 里面将 prettier 设为最后一个 extends

// .eslintrc    
{      
    "extends": ["eslint:recommended", "prettier"] // prettier 一定要是最后一个，才能确保覆盖   eslint:recommended 的规则 
}

问：怎么导入eslint-plugin-prettier

// .eslintrc    
{      
    "plugins": ["prettier"],      
    "rules": {        
        "prettier/prettier": "error"      
    }    
}

以上两者可以简写为

// .eslintrc    
{      
    "extends": ["eslint:recommended", "plugin:prettier/recommended"] // 这个plugin也放在extends数组最后才能覆盖
}

4. vue文件检测并设置保存就自动格式化代码

npm i eslint-plugin-vue eslint-plugin-prettier-vue  -D

// .eslintrc    
// eslint-plugin-vue现在已经废弃，改为eslint-plugin-vue-libs，有兴趣的朋友可以尝试
{      
    "extends": ["plugin:vue/essential"] 
}

// .vscode文件夹 的setting.json文件
{
"vetur.validation.template": false ,   // 把 vetur 扩展的 template 格式化去掉
"editor.formatOnSave": false,        
// 去掉 vscode 自带的自动保存 ，vscode 默认也是 false的，如果要用 eslint 格式化，默认的格式化就不能开启
//不关闭会和plugin:vue/recommended的规则相冲突
"eslint.enable": true,              // eslint 格式化的配置
"eslint.run": "onType",
  "editor.tabSize": 2,
  "editor.autoClosingQuotes": "always",
  "javascript.preferences.quoteStyle": "single",
  "workbench.iconTheme": "vscode-icons",
  // eslint自动格式化代码详细配置说明：https://www.worldlink.com.cn/en/osdir/vscode-eslint.html
  "editor.codeActionsOnSave": {
    // For ESLint
    "source.fixAll.eslint": true,
    // For TSLint
    "source.fixAll.tslint": true,
    // For Stylelint
    "source.fixAll.stylelint": true
  },
// 以下是旧写法，不必理会
 // "eslint.validate": [
 //   "javascript", // 用eslint的规则检测js文件
//    {
//      "language": "js",
//      "autoFix": true
//    },
//    {
//      "language": "vue",
//      "autoFix": true
//    }
  ],
  "eslint.options": {
    "extensions": [".js", ".vue"]
  }
}

5.代码提交前校验

npm i husky lint-staged  -D

// package.json文件中增加
"lint-staged": {
    "**/**.{js,json,pcss,md,vue}": [
      "prettier --write",
      "eslint",
      "git add"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }

最后：下面是eslintrc.js配置全文，另外有一些插件需要下载，可以根据自己的需要或者eslint报错提示进行安装

npm i babel-eslint eslint-plugin-import eslint-plugin-node eslint-plugin-promise  "eslint-plugin-html -D

下图可以看到项目中eslint或其他插件运行的情况，有报错根据提示解决即可


企业微信截图_16043040494958.png

至于相关配置可以参考：点我https://my.oschina.net/lsjcoder/blog/1611755
如果项目crl + s保存后还有一些波浪号，没关系。鼠标放上去看提示的什么，点击进入到具体的规则去配置即可，如下图

企业微信截图_16043850131799.png
直接看代码备注了解，选择需要下载的插件下载即可 
//eslintrc.js文件内容
/** 
 * rules
 * https://eslint.org/docs/rules/
 * https://github.com/benmosher/eslint-plugin-import
 */
module.exports = {
  extends: [
    'plugin:vue/essential',
    // "plugin:vue/essential" 仅包含Base Rules和Priority A:Essential，这里用前两种，少些规则html上仅有:src 和@tap不用换行
    // "plugin:vue/recommended" 包含Base Rules、Priority A:Essential、Priority B: Strongly Recommended、Priority C: Recommended
    'eslint:recommended',
    'plugin:prettier/recommended' // 放在最后面，用prettier的代码规范
  ],
  globals: { uni: true, wx: true }, //全局变量要在这里添加，避免出现提示
  plugins: [ 'import'], // eslint-plugin-import需要下载，因为下面rules需要用到该插件所以在这里导入
  env: {
    es6: true,
    browser: true,
    node: true    // eslint-plugin-node这个插件要安装
  },
  /**
   * "off"    0
   * "warn"   1
   * "error"  2
   */
  rules: {
    curly: [2, 'all'], // 必须使用 if(){} 中的{}

    'space-before-function-paren': [0],
    eqeqeq: [0],
    'vars-on-top': [2],
    'no-var': [2],
    'object-property-newline': [
      'error',
      { allowMultiplePropertiesPerLine: true }
    ],  // Map要么多行。要么单行
    'object-shorthand': [
      'error',
      'always',
      {
        ignoreConstructors: false,
        avoidQuotes: true
      }
    ],
    'padding-line-between-statements': [
      'error',
      { blankLine: 'always', prev: ['const', 'let', 'var'], next: '*' },
      {
        blankLine: 'any',
        prev: ['const', 'let', 'var'],
        next: ['const', 'let', 'var']
      },
      {
        blankLine: 'always',
        prev: ['import', 'cjs-import'],
        next: 'expression'
      },
      { blankLine: 'always', prev: '*', next: 'block-like' },
      { blankLine: 'always', prev: 'block-like', next: '*' },
      { blankLine: 'always', prev: '*', next: 'return' }
    ],
    'prefer-destructuring': [
      'warn',
      {
        VariableDeclarator: {
          array: false,
          object: true
        },
        AssignmentExpression: {
          array: false,
          object: true
        }
      },
      {
        enforceForRenamedProperties: false
      }
    ],
    'prefer-rest-params': 'error',
    'prefer-spread': 'error',
    'prefer-template': 'error',
    'prefer-arrow-callback': [
      'error',
      {
        allowNamedFunctions: false,
        allowUnboundThis: true
      }
    ],
    'no-use-before-define': [
      'error',
      {
        classes: true,
        functions: false,
        variables: true
      }
    ],
    'no-unused-expressions': [
      'error',
      {
        allowShortCircuit: true,
        allowTernary: true
      }
    ]
  },
  parserOptions: {
    parser: 'babel-eslint',   // babel-eslint这个插件要安装
    ecmaVersion: 7,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
      experimentalObjectRestSpread: true
    }
  }
}

prettierrc.js文件内容

module.exports = {
  /**
   * 保留现有的结尾行
   */
  endOfLine: 'auto',

  /**
   * 代码行的长度
   */
  printWidth: 80,

  /**
   * 缩进方式
   * true  = tab缩进
   * false = 空格缩进
   */
  useTabs: false,

  /**
   * 缩进长度
   */
  tabWidth: 2,

  /**
   * 语句是否有";"
   *
   * true  - const a = 1;
   * false - const b = 2
   */
  semi: false,

  /**
   * 字符串是否使用单引号包裹
   *
   * true  - 'hello'
   * false - "a"
   */
  singleQuote: true,

  /**
   * 数组&&对象&&参数列表 多行显示时,结尾处是否有","
   *
   * "none" - NO
   * "es5"  - Array,Object YES
   * "all"  - Array,Object,Parameter List YES
   */
  trailingComma: 'none',

  /**
   * 字面对象的大括号之间是否使用空格
   *
   * true  - { a: 1 }
   * false - {a: 1}
   */
  bracketSpacing: true,

  /**
   * 控制单个参数箭头函数的括号:
   * "avoid"  - 无括号 x => x
   * "always" - 有括号 (x) => x
   */
  arrowParens: 'avoid'
}
上一篇下一篇

猜你喜欢

热点阅读