uni-app使用vscode开发的配置以及保存时代码自动格式化和eslint语法检查

[dxhuii]

uni-app官网已经给出如何使用vscode来开发uni-app，请戳>当 uni-app 遇见 vscode，假设已经按官方给的步骤初始化了项目，接下来，我们来配置如何在保存的时候代码自动格式化和eslint语法检查。

相关文档

ESlint文档

prettier 文档(英文)

安装vscode相关插件

• ESlint
• Prettier
• Vetur
• Prettier ESLint

  Vetur 设置里的需要修改

• 首选项 -> 设置 -> 搜索 Vetur

这里设置除 prettyhtml 以外的其他选项，当时我配置的时候遇到一个问题，忘记是什么问题了，只记得这里需配置一下

如果 .vue 文件里面的格式和 .js 的文件格式不统一的话，这里不要勾选

创建vscode配置文件

首先在项目根目录建一个文件夹 .vscode，然后建一个 settings.json 的文件

可能与你原来的设置有重复的项目，按照你自己需要选择即可

{
  ... // 其他配置代码
  "editor.formatOnSave": true, // 保存时候自动格式化
   // 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
  },
  "prettier.printWidth": 140, // 超过最大值换行
  "prettier.singleQuote": true, // 使用单引号代替双引号
  "prettier.semi": false, // 句尾添加分号
  "prettier.arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
  "prettier.trailingComma": "none" // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
}

安装项目所需要的依赖

yarn add 或 npm i 我这里用 yarn 这里你也可以根据你自己需要删减

yarn add babel-eslint eslint eslint-config-standard eslint-config-vue eslint-plugin-html eslint-plugin-prettier eslint-plugin-prettier-vue eslint-plugin-standard eslint-plugin-vue prettier prettier-eslint prettier-standard -D

配置 .eslintrc

{
  "extends": [
    "vue",
    "standard",
    "eslint:recommended",
    "plugin:prettier/recommended",
    "plugin:vue/recommended",
    "prettier",
    "prettier/vue",
    "prettier/babel",
    "prettier/standard"
  ],
  "globals": {},
  "plugins": ["vue", "babel"],
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "rules": {
    "no-console": "off",
    "no-debugger": "off",
    "no-unused-vars": 0,
    "prettier/prettier": [
      "error",
      {
        "singleQuote": true,
        "parser": "flow",
        "semi": false,
        "arrowParens": "avoid",
        "printWidth": 140,
        "trailingComma": "none"
      }
    ]
  },
  "parserOptions": {
    "parser": "babel-eslint",
    "ecmaVersion": 7,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "experimentalObjectRestSpread": true
    }
  }
}

到此就配置完了，如有更好的方法，欢迎讨论，互相学习。