阅读 150

vscode 开发uni-app 配置eslint、prettier 实现代码检查和代码自动格式化

本来昨天使用HbuiiderX开发uni-app时已经搞好了代码检查和自动格式化,奈何今天一早突然就挂了。一开始时卡在[eslint-vuex]正在验证文档语法,后来干脆直接没反应。卸载重装多次后无果,于是有了这篇文章。 本文实现的方式是:利用vscode进行编码,用HBuilderX进行开发

一、利用HBuilderX创建uni-app项目

image.png

二、配置代码检查和代码自动格式化

1. 在vscode中打开项目

image.png

2. 创建package.json

npm init
复制代码

一路回车即可

image.png

2. 添加eslint、prettier相关依赖

npm install @vue/cli-plugin-eslint @vue/eslint-config-prettier babel-eslint eslint eslint-plugin-prettier eslint-plugin-vue prettier --save-dev
// or
cnpm install @vue/cli-plugin-eslint @vue/eslint-config-prettier babel-eslint eslint eslint-plugin-prettier eslint-plugin-vue prettier --save-dev
//or
yarn add @vue/cli-plugin-eslint @vue/eslint-config-prettier babel-eslint eslint eslint-plugin-prettier eslint-plugin-vue prettier --save-dev
复制代码

3. 配置.eslintrc.js

根目录下创建.eslintrc.js文件,并填入以下代码

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  env: {
    browser: true,
    node: true,
    es6: true
  },
  extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-unused-vars':'off',
  },
}
复制代码

4. 配置.prettierrc.json
根目录下创建.prettierrc.json文件,并填入以下代码

{
  "semi": false,
  "singleQuote": true,
  "endOfLine": "auto",
  "printWidth": 100
}

复制代码

此时已实现代码检查和代码自动格式化,如果存在其他格式化问题,重启vscode即可解决。

以下两个配置是参考这位老哥的,实现对编辑器和eslint作用范围的限制。

5. 配置.editorconfig

# http://editorconfig.org
root = true

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

[*]
charset=utf-8
end_of_line=lf
insert_final_newline=false
indent_style=space
indent_size=2

[{*.ng,*.sht,*.html,*.shtm,*.shtml,*.htm}]
indent_style=space
indent_size=2

[{*.jhm,*.xslt,*.xul,*.rng,*.xsl,*.xsd,*.ant,*.tld,*.fxml,*.jrxml,*.xml,*.jnlp,*.wsdl}]
indent_style=space
indent_size=2

[{.babelrc,.stylelintrc,jest.config,.eslintrc,.prettierrc,*.json,*.jsb3,*.jsb2,*.bowerrc}]
indent_style=space
indent_size=2

[*.svg]
indent_style=space
indent_size=2

[*.js.map]
indent_style=space
indent_size=2

[*.less]
indent_style=space
indent_size=2

[*.vue]
indent_style=space
indent_size=2

[{.analysis_options,*.yml,*.yaml}]
indent_style=space
indent_size=2

[*.md]
insert_final_newline = false
trim_trailing_whitespace = false
复制代码

6. 配置.eslintignore

后续有其他第三方插件不想被eslint影响,可以添加到下面

build/*.js
src/assets
public
dist
/node_modules
复制代码

以上,就可以在vscode上码代码,在HBuilderX上运行项目。先做个笔记记录一下,后续有问题得话再补充。