Vue中的ESLint代码格式

Question

我用npm和vuejs/vue-cli创建了一个项目.

我导入了ESLint扩展.

我的package.json文件中有eslint条目.

现在,当我格式化代码(右键单击,格式代码)时,它完全破坏了我的代码.

我需要做什么才能让vscode根据ESLint规则进行格式化？

但是在网站上,ESLint抱怨所有内容都没有正确格式化,因此它显然在某种意义上安装并运行:

Answer 1

1)首先,您需要在VS代码中安装ESLint扩展.

此扩展使用ESLint库.如果尚未在本地或全局安装ESLint,请执行此操作

npm install eslint //For a local install
 or 
npm install -g eslint //For a global install.

2)然后,在VS代码中打开Setting.json文件.按文件 - >首选项 - >设置.

3)添加以下设置.

 {
    "eslint.enable": true,
    "eslint.autoFixOnSave": true,
    "eslint.run": "onType",
    "eslint.options": {
        "extensions": [".js",".vue"]
    },
    "eslint.validate": [
        { "language": "vue", "autoFix": true }
    ]
}

4)现在,检查你的vue文件.它将开始显示linting错误.如果没有,重启VS代码.

Answer 2

我以前遇到过这个问题。我通过使用 npm install 在本地安装 eslint（可以全局安装）解决了这个问题，然后运行“eslint --init”，重新启动 vscode。希望这对您有帮助。