【Uni-App】vscode 开发uni-app 配置eslint、prettier 实现代码检查和代码自动格式化
创始人
2024-04-23 20:35:27
0

目录

    • 一:前言
    • 二、利用HBuilderX创建uni-app项目
    • 三、配置代码检查和代码自动格式化
        • 1. 在vscode中打开项目
        • 2. 创建package.json
        • 3. 添加eslint、prettier相关依赖
        • 4. 配置.eslintrc.js
        • 5. 配置.prettierrc.json
        • 6. 配置.editorconfig
        • 7. 配置.eslintignore
    • 如果以上还不生效:
        • 1.根目录下创建.vscode文件夹
        • 2..vscode文件夹下创建settings.json文件
        • 3 .prettierrc文件配置

一:前言

本来很早之前就想总结一下关于uni-app的一些代码自动格式化方面的配置
因为公司项目原因,拆分了新老项目,需要带新人,每个人的开发方式不一样
所以为了项目的代码风格统一性,以及为了避免后期的git分支操作冲突

我自己的 HbuiiderX开发uni-app时已经搞好了代码检查和自动格式化,奈何其他同事都不会设置,导致了很多次代码提交,显示有很多改动,导致代码覆盖问题。
于是有了这篇文章。

本文实现的方式是:利用vscode进行编码,用HBuilderX进行开发

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

在这里插入图片描述

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

1. 在vscode中打开项目

在这里插入图片描述

2. 创建package.json

npm init

一路回车即可
在这里插入图片描述

3. 添加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

4. 配置.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',},
}

5. 配置.prettierrc.json

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

这里可以根据个人代码风格喜好来配置

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

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

6. 配置.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

7. 配置.eslintignore

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

build/*.js
src/assets
public
dist
/node_modules

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

如果以上还不生效:

1.根目录下创建.vscode文件夹

在这里插入图片描述

2…vscode文件夹下创建settings.json文件

{"editor.formatOnSave": true,"eslint.validate": ["javascript", "javascriptreact", "typescriptreact", "typescript", "vue"],"path-autocomplete.pathMappings": {"@": "${folder}/src"},"path-autocomplete.extensionOnImport": true,"npm-intellisense.importES6": true,"npm-intellisense.importDeclarationType": "const","npm-intellisense.importQuotes": "'","npm-intellisense.importLinebreak": ";\r\n","typescript.tsdk": "./node_modules/typescript/lib","typescript.enablePromptUseWorkspaceTsdk": true,"volar.tsPlugin": true,"volar.tsPluginStatus": false,//===========================================//============= Editor ======================//==========================================="explorer.openEditors.visible": 0,"editor.tabSize": 2,"editor.defaultFormatter": "esbenp.prettier-vscode","diffEditor.ignoreTrimWhitespace": false,//===========================================//============= Other =======================//==========================================="breadcrumbs.enabled": true,"open-in-browser.default": "chrome",//===========================================//============= files =======================//==========================================="files.eol": "\n","search.exclude": {"**/node_modules": true,"**/*.log": true,"**/*.log*": true,"**/bower_components": true,"**/dist": true,"**/elehukouben": true,"**/.git": true,"**/.gitignore": true,"**/.svn": true,"**/.DS_Store": true,"**/.idea": true,"**/.vscode": false,"**/yarn.lock": true,"**/tmp": true,"out": true,"dist": true,"node_modules": true,"CHANGELOG.md": true,"examples": true,"res": true,"screenshots": true,"yarn-error.log": true,"**/.yarn": true},"files.exclude": {"**/.cache": true,"**/.editorconfig": true,"**/.eslintcache": true,"**/bower_components": true,"**/.idea": true,"**/tmp": true,"**/.git": true,"**/.svn": true,"**/.hg": true,"**/CVS": true,"**/.DS_Store": true},"files.watcherExclude": {"**/.git/objects/**": true,"**/.git/subtree-cache/**": true,"**/.vscode/**": true,"**/node_modules/**": true,"**/tmp/**": true,"**/bower_components/**": true,"**/dist/**": true,"**/yarn.lock": true},"stylelint.enable": true,"stylelint.packageManager": "yarn","liveServer.settings.donotShowInfoMsg": true,"telemetry.enableCrashReporter": false,"workbench.settings.enableNaturalLanguageSearch": false,"path-intellisense.mappings": {"/@/": "${workspaceRoot}/src"},"prettier.requireConfig": true,"typescript.updateImportsOnFileMove.enabled": "always","workbench.sideBar.location": "left","[javascriptreact]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[typescript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[typescriptreact]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[html]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[css]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[less]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[scss]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[markdown]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"editor.codeActionsOnSave": {"source.fixAll.eslint": true,"source.fixAll.stylelint": true // 自动格式化vue的template},"[vue]": {"editor.codeActionsOnSave": {"source.fixAll.eslint": true, // 开启格式化eslint"source.fixAll.stylelint": true // 自动格式化stylelint}},"i18n-ally.localesPaths": ["src/locales/lang"],"i18n-ally.keystyle": "nested","i18n-ally.sortKeys": true,"i18n-ally.namespace": true,"i18n-ally.pathMatcher": "{locale}/{namespaces}.{ext}","i18n-ally.enabledParsers": ["ts"],"i18n-ally.sourceLanguage": "en","i18n-ally.enabledFrameworks": ["vue", "react"],"cSpell.words": ["vben","windi","browserslist","tailwindcss","esnext","antv","tinymce","qrcode","sider","pinia","sider","nprogress","INTLIFY","stylelint","esno","vitejs","sortablejs","mockjs","codemirror","iconify","commitlint","vditor","echarts","cropperjs","logicflow","vueuse","zxcvbn","lintstagedrc","brotli"]
}

3 .prettierrc文件配置

module.exports = {// 一行最多 100 字符printWidth: 200,// 不使用缩进符,而使用空格useTabs: false,// 使用 2 个空格缩进tabWidth: 2,tabSize: 2,// 行尾需要有分号semi: false,// 使用单引号singleQuote: true,// 对象的 key 仅在必要时用引号quoteProps: "as-needed",// jsx 不使用单引号,而使用双引号jsxSingleQuote: false,// 末尾不需要逗号trailingComma: "es5",// 大括号内的首尾需要空格bracketSpacing: true,// jsx 标签的反尖括号需要换行jsxBracketSameLine: false,// 箭头函数,只有一个参数的时候,也需要括号arrowParens: "always",// 每个文件格式化的范围是文件的全部内容rangeStart: 0,rangeEnd: Infinity,// 不需要写文件开头的 @prettierrequirePragma: false,// 不需要自动在文件开头插入 @prettierinsertPragma: false,// 使用默认的折行标准proseWrap: "preserve",// 根据显示样式决定 html 要不要折行htmlWhitespaceSensitivity: "css",// 换行符使用 lf 结尾是 \n \r \n\r autoendOfLine: "lf",
};

相关内容

热门资讯

安卓13系统更新蓝牙,蓝牙功能... 你有没有发现,最近你的安卓手机好像变得不一样了?没错,就是那个神秘的安卓13系统更新,它悄悄地来到了...
安卓系统钉钉打开声音,安卓系统... 你有没有遇到过这种情况?手机里装了钉钉,可每次打开它,那声音就“嗖”地一下跳出来,吓你一跳。别急,今...
理想汽车操作系统安卓,基于安卓... 你有没有想过,一辆汽车,除了能带你去你想去的地方,还能像智能手机一样,给你带来智能化的体验呢?没错,...
安卓系统越狱还能升级吗,升级之... 你有没有想过,你的安卓手机越狱后,还能不能愉快地升级系统呢?这可是不少手机爱好者关心的大问题。今天,...
安卓系统蓝牙耳机拼多多,畅享无... 你有没有发现,最近蓝牙耳机在市场上可是火得一塌糊涂呢!尤其是安卓系统的用户,对于蓝牙耳机的要求那可是...
安卓变苹果系统桌面,桌面系统变... 你知道吗?最近有个大新闻在科技圈里炸开了锅,那就是安卓用户纷纷转向苹果系统桌面。这可不是闹着玩的,这...
鸿蒙系统怎么下安卓,鸿蒙系统下... 你有没有想过,你的手机里那个神秘的鸿蒙系统,竟然也能和安卓世界来一场亲密接触呢?没错,今天就要来揭秘...
手机安卓系统流程排行,便捷操作... 你有没有发现,现在手机的世界里,安卓系统就像是个大舞台,各种版本层出不穷,让人眼花缭乱。今天,就让我...
安卓系统左上角hd,左上角HD... 你有没有发现,每次打开安卓手机,左上角那个小小的HD标识总是默默地在那里,仿佛在诉说着什么?今天,就...
安卓系统软件文件,架构解析与功... 你有没有发现,手机里的安卓系统软件文件就像是一个神秘的宝库,里面藏着无数的宝藏?今天,就让我带你一起...
安卓系统输入法回车,探索安卓输... 你有没有发现,在使用安卓手机的时候,输入法回车键的奇妙之处?它就像是我们指尖的魔法师,轻轻一点,文字...
安卓修改系统时间的软件,轻松掌... 你有没有想过,有时候手机上的时间不对劲,是不是觉得生活节奏都被打乱了?别急,今天就来给你揭秘那些神奇...
安卓系统能改成鸿蒙吗,系统迁移... 你有没有想过,你的安卓手机能不能变成一个鸿蒙系统的“小清新”呢?这可不是天方夜谭哦,今天就来聊聊这个...
安卓机怎么从新装系统,从零开始... 亲爱的安卓手机用户们,你是否在某个瞬间突然觉得手机卡顿得像个老古董,急需给它来个“大变身”?别急,今...
安卓手机安装Linux双系统,... 你有没有想过给你的安卓手机来个变身大法?没错,就是安装Linux双系统!想象一边是流畅的安卓,一边是...
安卓系统关闭更新补丁,轻松提升... 亲爱的手机用户们,你们有没有发现,最近你的安卓手机好像有点儿“懒”了呢?更新补丁的速度明显慢了下来,...
麒麟os是不是安卓系统,揭秘与... 最近手机圈里可是热闹非凡呢!不少朋友都在问我:“麒麟OS是不是安卓系统?”这个问题可真是让人好奇,咱...
安卓系统卸载快应用,安卓系统轻... 你有没有发现,手机里的应用越来越多,有时候真的让人眼花缭乱呢?尤其是安卓系统里的那些“快应用”,虽然...
安卓14系统更新包,全新功能与... 你知道吗?最近安卓系统又来了一次大变身,那就是安卓14系统更新包!这可不是一个小打小闹的更新,而是满...
oppo安卓11.1系统新功能... 你知道吗?最近OPPO手机又来了一次大升级,安卓11.1系统的新功能简直让人眼前一亮!今天,就让我带...