uni-app使用vscode开发的配置以及保存时代码自动格式化和eslint语法检查
发布于 4 年前 作者 shentao 2665 次浏览 来自 分享

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 addnpm 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
    }
  }
}

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

1 回复
回到顶部