配置eslint代码规范

最新推荐文章于 2024-08-10 07:46:16 发布

望南

最新推荐文章于 2024-08-10 07:46:16 发布

阅读量978

点赞数

分类专栏： nuxt3 文章标签： typescript vscode javascript

本文链接：https://blog.csdn.net/tj310/article/details/122410582

版权

1、vscode安装eslint、Prettier和vetur

在这里插入图片描述

2、安装依赖

yarn add eslint prettier eslint-config-prettier eslint-plugin-prettier -D

要实现typescript环境，继续安装如下依赖

yarn add typescript @nuxtjs/eslint-config-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser -D

贴下我的版本：

    "@nuxtjs/eslint-config-typescript": "^8.0.0",
    "@typescript-eslint/eslint-plugin": "^5.8.1",
    "@typescript-eslint/parser": "^5.9.0",
    "eslint": "^8.6.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "prettier": "^2.5.1",
    "typescript": "^4.5.4"

3、配置vscode，

ctrl+shift+p 打开设置，在setting.json中加入一下内容：
在这里插入图片描述

  "editor.formatOnSave": true,
  "prettier.semi": false,
  // prettier 设置强制单引号
  "prettier.singleQuote": true,
  // 选择 vue 文件中 template 的格式化工具
  // "vetur.format.defaultFormatter.html": "prettyhtml",
  "prettier.arrowParens": "avoid",
  "prettier.printWidth": 100, // 超过最大值换行
  "prettier.endOfLine": "auto",
  "prettier.trailingComma": "none",
  // vetur 的自定义设置
  "vetur.format.defaultFormatter.html": "prettyhtml",
  "vetur.format.defaultFormatterOptions": {
   
    "js-beautify-html": {
   
      "wrap_attributes": "auto"
    },
    "prettyhtml": {
   
      "printWidth": 200,
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": false
    },
    "prettier": {
   
      "singleQuote": true, //用单引号
      "semi": false //不加分号
    }
  },
  /* eslint插件配置 */
  "eslint.enable": true,
  "editor.codeActionsOnSave": {
   
    "source.fixAll.eslint": true
  },
  "eslint.alwaysShowStatus": true,
  // "eslint.nodePath": "c:\\Users\\suninfo\\Desktop\\project\\Q1web项目\\suninfo-web\\node_modules",//这个会防止项目打开其他项目文件时路径改变，导致eslint不会出现提示，最好将此设置为工作区中
  "eslint.run": "onType",
  "eslint.validate": ["javascript", "javascriptreact", "jsx", "html", "vue", "typescript"], //将>多行JSX元素放在最后一行的末尾，而不是单独放在下一行
  "eslint.options": {
   
    "extensions": [".js", ".vue"]
  },

这里如果团队开发的话，最好使用Settings Sync插件，云端同步escode开发环境就及配置，在git上生成一个gistid，方便其他成员克隆，这样就能保持代码风格了。
在这里插入图片描述

4、在根目录添加.eslintrc.json和.eslintignore

.eslintignore

dist
node_modules
.nuxt

以上文件不检查

.eslintrc.json,这个文件有点多，很多我修正过了，不习惯的可以自行修改

{
   
  "env": {
   
    "browser": true,
    "es2021": true
  },
  "extends": ["plugin:vue/vue3-essential", "plugin:@typescript-eslint/recommended", "prettier"],
  "globals": {
   
    "BMap": true
  },
  "parserOptions": {
   
    "ecmaVersion": 2020,
    "parser": "@typescript-eslint/parser",
    "sourceType": "module",
    "ecmaFeatures": {
   
      "experimentalObjectRestSpread":