Help setting up company mode. Autocompletion of HTML CSS files

Question

Autocompletion of HTML file by company-mode is not working except when M-x company-web-html is explicitly called.

I'm expecting, for example, type 'di' in an html file, and get suggested 'div' for instance.

Here's my .emacs:

;; web stuff

;; automatically load web-mode when opening web-related files
(add-to-list 'auto-mode-alist '("\\.ts\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.html?\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.css?\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.js\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.scss\\'" . web-mode))

;; company-web configuration
;(add-to-list 'company-backends 'company-web-html)
;(add-to-list 'company-backends 'company-web-jade)
;(add-to-list 'company-backends 'company-web-slim)

;; set indentations
(defun my-web-mode-hook ()
  "Hooks for Web mode."
  (setq web-mode-markup-indent-offset 2)
  (setq web-mode-code-indent-offset 2)
  (setq web-mode-css-indent-offset 2)
)
(add-hook 'web-mode-hook  'my-web-mode-hook)
(setq tab-width 2)

;; highlight of columns
(setq web-mode-enable-current-column-highlight t)
(setq web-mode-enable-current-element-highlight t)

;; set the company completition vocabulary to css and html when in web-mode
(defun my-web-mode-hook ()
  (set (make-local-variable 'company-backends)
       '(company-css company-web-html company-yasnippet company-files))
)

;; emmet settings
;; turn on emmet in web-mode
(add-hook 'web-mode-hook  'emmet-mode)

;; emmet to switch between html and css properly in the same document
(add-hook 'web-mode-before-auto-complete-hooks
          (lambda ()
            (let ((web-mode-cur-language
                   (web-mode-language-at-pos)))
              (if (string= web-mode-cur-language "php")
                  (yas-activate-extra-mode 'php-mode)
                (yas-deactivate-extra-mode 'php-mode))
              (setq emmet-use-css-transform
                    (string= web-mode-cur-language "css")))))

;; use company-mode in all buffers
(add-hook 'after-init-hook 'global-company-mode)

When I do M-x company-web-html it autocompletes.

Too broad. Please pose a specific question, which solicits a specific answer. — Drew, Jan 31 '20 at 23:49
i want autocompletion for html and css(scss) file when they are loaded. — logan, Jan 31 '20 at 23:51
"Help setting up" and "doesn't work" don't pose a specific question. — Drew, Feb 01 '20 at 00:20
Please don't just dump your .emacs and expect us to debug it. — Stefan, Feb 01 '20 at 01:03

score 2 · Answer 1 · answered Feb 02 '20 at 23:22

company-capf is the backend which should interface to mode's completion support in emacs versions >= 26

In addtion, look into using lsp and using the company-lsp backend.

Instructions for installing css helpers are here:

https://github.com/emacs-lsp/lsp-mode

Specifically:-

npm install -g vscode-css-languageserver-bin

Help setting up company mode. Autocompletion of HTML CSS files

1 Answers1