vue项目的格式化配置 prettier+eslint

uniapp项目的格式化和eslint同样适用

先安装vscode插件

• prettier
• eslint

创建settings.json与.prettierrc文件

.vscode>>settings.json

{
  "eslint.validate": ["javascript", "javascriptreact", "vue-html", "vue"],
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.run": "onSave",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

根目录新建一个.prettierrc文件

{
    "tabWidth": 2,
    "useTabs": true, // 使用tab（制表符）缩进而非空格
    "singleQuote": true,// 单引号
    "printWidth": 175,// 一行超过175个字符就换行
    "semi": false,// 是否在行尾加分号
    "trailingComma": "none",// 数组、对象最后一个元素的尾逗号
    "bracketSpacing": true,// 花括号前后空格
    "jsxBracketSameLine": false, // 使多行JSX元素最后一行末尾的 > 单独一行
    "arrowParens": "avoid",//只有一个参数的箭头函数的参数是否带圆括号（默认avoid不带）
    "htmlWhitespaceSensitivity": "ignore",//  HTML 文件空格敏感度
  }
  

给Vue项目添加eslint

vue add eslint

image.png

选择Error prevention only，eslint会使用 eslint:recommended，即eslint的推荐核心规则

image.png

选择保存时检查
然后会自动下载eslint相关的依赖，根目录会出现一个.eslint.js的文件

image.png

这样界面和控制台都会有报错提示

image.png

PS 界面没有报错提示则检查vscode的状态栏的eslint是否开启的状态

image.png

PS：uniapp 的uni会报错 在.eslint.js中加入全局变量，就不会报错了

module.exports = {
  // ...
  globals: {
    uni: true
  }
}